CSS3 原生变量var()用法

变量声明及规范

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

(案例出处: http://www.divcss5.com/css3-style/c50629.shtml

留下评论

电子邮件地址不会被公开。 必填项已用*标注