变量声明及规范
CSS中原生的变量定义语法是：–，变量使用语法是：var(–)，其中*表示我们的变量名称。
/**
* 全局声明变量
*/
:root {
--1: #ccc;
}
/**
* 按选择器声明变量，变量只在各选择器中生效
*/
#main {
--1: #ccc;
}
/**
* 变量使用
*/
.message-box {
background-color: var(--1);
}
/**
* 为变量添加默认值，如果变量不存在，默认值生效
*/
.message-box {
background-color: var(--1, #fff);
}
/**
* 如果变量存在，且是无效值（不符合属性规范的值），则设置为CSS默认值。
*/
.message-box {
background-color: var(--1, #fff);
}最佳实践
一个响应式设计，CSS变量参与运算，无JS参与，CSS代码量减少，逻辑更简洁清晰。
box {
--columns: 4;
--margins: calc(24px / var(--columns));
--space: calc(4px * var(--columns));
--fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
.box {
--columns: 3;
}
}
@media screen and (max-width: 900px) {
.box {
--columns: 2;
}
}
@media screen and (max-width: 600px) {
.box {
--columns: 1;
}
}