CSS 变量（css自定义属性）
使用场景：复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。
一、变量的声明
声明方法：声明变量时，变量名前面要加两根连词线（--）。
body {
--foo: blue;
--Foo: red;
}
在上述代码中声明了两个变量--foo和--Foo。它们与color和font-size等正式属性没有什么不同，只是没有默认含义。变量名大小写敏感，--foo与--Foo就是两个不同的变量。
二、var()函数。
变量的读取可以使用var()函数。
a {
color: var(--foo);
background-color: var(--Foo);
}
具体实现https://code.juejin.cn/pen/7280097120906903588
自定义属性的继承性
自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被使用。
备用值
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。第二个参数不处理内部的逗号或空格，都视作参数的一部分。
color: var(--foo, #7F583F);
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);
var()函数还可以用在变量的声明。
:root {
--primary-color: red;
--logo-text: var(--primary-color);
}
注：在HTML中，:root代表元素，与选择器html相同，只是优先级更高。
变量值只能用作属性值，不能用作属性名。
var(--side): 20px; /*无效的*/
三、变量值的类型
如果变量值是一个字符串，可以与其他字符串拼接。
--bar: 'hello';
--foo: var(--bar)' world';
如果变量值是数值，不能与数值单位直接连用。
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
如果变量值带有单位，就不能写成字符串。
/* 无效 /
.foo {
--foo: '20px';
font-size: var(--foo);
}
/ 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);
}
四、作用域
同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。
内联样式>id选择器>类选择器>标签选择器>通用选择器
所以群当局的变量通常放在:root里面，确保任何选择器都可以读取他们。
具体实现https://code.juejin.cn/pen/7280096149875195940
五、响应式布局
CSS 是动态的，页面的任何变化，都会导致采用的规则变化。
利用这个特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。
具体实现https://code.juejin.cn/pen/7280097838439563279
参考资料
CSS 变量教程 - 阮一峰的网络日志
相关阅读
您阅读本篇文章共花了：
发表评论