原生css终于有变量了!今天就学习下css变量
定义css变量
在css中,变量都是以两个横线(–)开头的,css变量也被称为”自定义属性”
|
|
像上面的”–font-size”就是变量
使用css变量
使用过预处理器的都知道,我们可以通过引用变量名来使用变量。比如:
|
|
但是在css中使用就不一样了,我们需要通过var()函数来引用变量,像这样:
|
|
在很多预处理工具中,我们可以在任何地方使用变量。但是在原生css中,变量只能作为属性值,不能作为属性名。
|
|
上面的代码会报错!
另外,css变量也不能像预处理工具那样直接做数学计算,需要通过css的calc()函数。
|
|
css变量作用域
我们都知道javascript变量的作用域分为全局作用域和局部作用域,css变量也是这样。
在”:root”中定义的变量就是全局变量,在其他选择器中定义的就是局部变量。
将css变量作为自定义属性看待,因此它跟很多普通属性类似。可以在任意元素(包括伪元素)上自定义属性,并且也存在继承
注意
css变量区分大小写
不要在代码中出现循环依赖
1234567:root {--test: var(--test);}.test {--test1: var(--test2);--test2: var(--test1);}不要使用非法变量,比如:
1234.test {--color: red;font-size: var(--color);}
上面代码中font-size的值被解析成red,这显然是不合法的,它最后会被解析成默认值即14px
- 使用单独符号要小心,举个例子1234.test {--font-size: 20;font-size: var(--font-size)px;}
上面的写法不会解析成20px,而是20 px,中间是有空格的,所以样式不会应用到元素上面。
解决办法有下面两种:
小测试
|
|
上面代码中的元素中的字体分别是什么颜色?
第一个p标签只匹配到了
第一个div匹配到了
第二个div匹配到了
第二个p标签是第二个div的子元素,会继承它的字体颜色,所以是red。