CSS变量 var()

[TieMuZhen]

用法

CSS中原生的

• 变量定义语法是：--*
• 变量使用语法是：var(--*)

其中*表示我们的变量名称。

实际应用

当我们响应式变化的时候，改变的CSS属性值不是1个，而是3个或者更多，如果我们有3个响应点，是不是就至少需要9个CSS声明？但是，由于我们有了CSS变量，同时，CSS变量可以传递，当我们遭遇响应点的时候，我们只需要改变一个CSS属性值就可以了。

下面就是本demo核心CSS代码（只需要改变--columns这一个变量即可）：

.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;
    }
}

通过使用变量大大简化了媒体查询的代码

参考文献

• 小tips:了解CSS变量var
• CSS 变量教程