原生css终于有变量了！今天就学习下css变量

定义css变量

在css中，变量都是以两个横线(–)开头的，css变量也被称为”自定义属性”

1
2
3
.test {
    --font-size: 14px;
}

像上面的”–font-size”就是变量

使用css变量

使用过预处理器的都知道，我们可以通过引用变量名来使用变量。比如：

1
2
3
4
$font-size: 14px;
.test {
    font-size: $font-size;
}

但是在css中使用就不一样了，我们需要通过var()函数来引用变量，像这样：

1
2
3
4
5
6
:root {
    --font-size: 14px;
}
.test {
    font-size: var(--font-size);
}

在很多预处理工具中，我们可以在任何地方使用变量。但是在原生css中，变量只能作为属性值，不能作为属性名。

1
2
3
4
5
6
:root {
    --bg-color: background-color;
}
.test {
    var(--bg-color): red;
}

上面的代码会报错！

另外，css变量也不能像预处理工具那样直接做数学计算，需要通过css的calc()函数。

1
2
3
4
.test {
    --font-size: calc(20px * 2);
    font-size: var(--font-size);
}

css变量作用域

我们都知道javascript变量的作用域分为全局作用域和局部作用域，css变量也是这样。

在”:root”中定义的变量就是全局变量，在其他选择器中定义的就是局部变量。

将css变量作为自定义属性看待，因此它跟很多普通属性类似。可以在任意元素(包括伪元素)上自定义属性，并且也存在继承

注意

  • css变量区分大小写

  • 不要在代码中出现循环依赖

    1
    2
    3
    4
    5
    6
    7
    :root {
        --test: var(--test);
    }
    .test {
        --test1: var(--test2);
        --test2: var(--test1);
    }

  • 不要使用非法变量，比如：

    1
    2
    3
    4
    .test {
        --color: red;
        font-size: var(--color);
    }

上面代码中font-size的值被解析成red，这显然是不合法的，它最后会被解析成默认值即14px

  • 使用单独符号要小心，举个例子
    1
    2
    3
    4
    .test {
        --font-size: 20;
        font-size: var(--font-size)px;
    }

上面的写法不会解析成20px，而是20 px，中间是有空格的，所以样式不会应用到元素上面。
解决办法有下面两种：

1
2
3
4
5
6
7
8
9
10
<!-- 第一种方法 -->
.test {
    --font-size: 20px;
    font-size: var(--font-size);
}
<!-- 第二种方法 -->
.test {
    --font-size:20;
    font-size: calc(var(--font-size) * 1px);
}

小测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
/* 定义变量 */
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
/* 使用变量 */
* { color: var(--color); }
</style>
<p>第一个p标签</p>
<div>第一个div</div>
<div id='alert'>
  第二个div<p>第二个p标签</p>
</div>

上面代码中的元素中的字体分别是什么颜色？

第一个p标签只匹配到了:root选择器，所以是blue；
第一个div匹配到了div选择器，所以是green；
第二个div匹配到了#alert选择器，所以是red；
第二个p标签是第二个div的子元素，会继承它的字体颜色，所以是red。



参考：关于 CSS 变量，你需要了解的一切