css自定义属性/css变量

• css自定义属性/css变量
• 由自定义属性标记设定值，由 var() 函数来获取值
• 属性名需要以两个减号（–）开始

---

• 全局变量：在:root伪类上定义自定义属性，可以在 HTML 文档中全局应用它

• 局部变量：在选择器中定义的变量 或 在标签中定义的变量

  • p {
    	--color: red;
    }
    span {
    	--color: green;
    }
    
    .p-elem {
    	color: var(--color);
    }
    .span-elem {
    	color: var(--color);
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

  • <div class="item" style="--a: red">1<span>11111</span></div>
    <div class="item" style="--a: pink">2</div>
    <div class="item" style="--a: blue">3</div>
    
    .item {
    	color: var(--a);
    }
    .item span{
    	color: #fff;
    	background-color: var(--a);
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

---

变量类型：

• 如果变量值是一个字符串，可以与其他字符串拼接

  • :root {
      --content: 'hello';
    }
    .container-box::after {
    	content: var(--content) 'world';
    }
    1
    2
    3
    4
    5
    6

• 如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接

  • :root {
      --num: 20;
    }
    .container-box::after {
       font-size: calc(var(--num) * 1px);
    }
    1
    2
    3
    4
    5
    6

• 如果变量值带有单位，就不能写成字符串。

  • :root {
      /* --str: '20px'; */
      --str: 20px;
    }
    .container-box::after {
     	font-size: var(--str);
    }
    1
    2
    3
    4
    5
    6
    7