一、变量的声明
声明变量的时候,变量名前面要加两根连词线--
,变量名大小写敏感
1 | body { |
上面代码中,body选择器里面声明了两个变量:--foo
和--bar
。它们与正式属性没有什么不同,只是没有默认含义。所以 CSS 变量(CSS variable)又叫做”CSS 自定义属性”(CSS custom properties)。因为变量与自定义的 CSS 属性其实是一回事。
各种值都可以放入 CSS 变量
1 | :root { |
二、var() 函数
var()函数用于读取变量。
1 | a { |
var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
1 | color: var(--foo, #7F583F); |
第二个参数不处理内部的逗号或空格,都视作参数的一部分。
1 | var(--font-stack, "Roboto", "Helvetica"); |
var()函数还可以用在变量的声明。
1 | :root { |
注意,变量值只能用作属性值,不能用作属性名。
1 | .foo { |
上面代码中,变量–side用作属性名,这是无效的。
三、变量值的类型
如果变量值是一个字符串,可以与其他字符串拼接。
1 | --bar: 'hello'; |
利用这一点,可以 debug(例子)。
1 | body:after { |
如果变量值是数值,不能与数值单位直接连用。
1 | .foo { |
上面代码中,数值与单位直接写在一起,这是无效的。必须使用calc()函数,将它们连接。
1 | .foo { |
如果变量值带有单位,就不能写成字符串。
1 | /* 无效 */ |
四、作用域
同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的”层叠”(cascade)规则是一致的。下面是一个例子。
1 | <p>蓝色</p> |
1 | :root { |
上面代码中,三个选择器都声明了--color
变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。这就是说,变量的作用域就是它所在的选择器的有效范围。
1 | body { |
上面代码中,变量–foo的作用域是body选择器的生效范围,–bar的作用域是.content选择器的生效范围。由于这个原因,全局的变量通常放在根元素:root里面,确保任何选择器都可以读取它们。
1 | :root { |
五、响应式布局
CSS 是动态的,页面的任何变化,都会导致采用的规则变化。
利用这个特点,可以在响应式布局的media命令里面声明变量,使得不同的屏幕宽度有不同的变量值。
1 | body { |
六、设置CSS变量
1、HTML标签中设置CSS变量
1 | <div style="--color: #cd0000;"> |
2、JS中设置CSS变量
1 | <div id="box"> |
1 | box.style.setProperty('--color', '#cd0000'); |
3、JS中获取CSS变量
1 | // 获取 --color CSS 变量值 |
注:由此可见,CSS变量
与自定义的 CSS 属性
其实是一回事