css变量
css变量
声明css变量
声明一个css变量和声明一个css属性一样,只不过约定css变量名必须是以--
开头。
css变量具有作用域的概念,同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的。
上面代码中,三个选择器都声明了--color
变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。
css变量对大小写敏感,--blue
和--Blue
是两个不同的变量
使用css变量
var()
用于读取变量,它接收两个参数,第一个参数是要读取的变量名,第二个参数是默认值,当变量未定义时使用默认值。
第二个参数可以出现逗号或空格,这些都被视作参数的一部分。
当浏览器遇到无效的css变量时,会使用默认值或继承值。
检查属性 color 是否为继承属性。是,但是
<p>
没有任何父元素定义了 color 属性。转到下一步。将该值设置为它的默认初始值,比如 black。
css变量的作用
css变量适用范围非常广,下面讨论一下一些非常有用的场景。
多主题
css变量可以制作多主题网站,比如网站的暗黑模式,我们将各组件的颜色存放到css变量中,如果要改变网站主题颜色只要改动css变量值就可以了。
通过动态的修改css变量,可以很方便地修改网站主题。
知名的跨平台移动app开发框架——Ionic就是采取这种方式实现。下面是Ionic官网文档的原话和翻译。
Ionic组件是通过css变量构建的,这使应用程序的定制变得简单。css变量允许在一个地方存储一个值,然后在其他多个地方引用。这也使得动态改变css变为可能(在过去需要借助css预处理器),css变量让覆盖Ionic组件以匹配品牌或主题变得比以往更容易。
可见css变量最重要的是可以在不使用css预处理器的前提下动态地修改css。
响应式
这个网站定义了很多css变量,并且网站的很多组件都由这些变量来控制,那么这时只要改变了这些css变量就能达到改变css的目的。
看css变量--icon-box-width
,当我们拉动缩小窗口时,这个值也会跟着缩小,从而使组件也跟着缩小。
操作css变量
媒体查询
可以借助媒体查询达到修改css变量的目的。
JavaScript操作css变量
可以通过JavaScript读取、设置和修改css变量
JavaScript 操作 CSS 变量的写法如下。
参考
最后更新于