本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于CSS中变量的的用法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。前两天看到阮大神的一篇在css中使用变量的文章,整理了一下。
这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。
一、变量的声明
声明变量的时候,变量名前面要加两根连词线(--
)。
1 2 3 4 |
|
上面代码中,body选择器里面声明了两个变量:--foo和--bar。
它们与color、font-size等正式属性没有什么不同,只是没有默认含义。所以 CSS 变量(CSS variable)又叫做"CSS 自定义属性"(CSS custom properties)。因为变量与自定义的 CSS 属性其实是一回事。
你可能会问,为什么选择两根连词线(--)表示变量?因为$foo被 Sass 用掉了,@foo被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根连词线了。
各种值都可以放入 CSS 变量。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
变量名大小写敏感,--header-color和--Header-Color是两个不同变量。
二、var() 函数
var()
函数用于读取变量。
1 2 3 4 |
|
var()
函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
1 |
|
第二个参数不处理内部的逗号或空格,都视作参数的一部分。
1 2 |
|
var()
函数还可以用在变量的声明。
1 2 3 4 |
|
注意,变量值只能用作属性值,不能用作属性名。
1 2 3 4 5 |
|
上面代码中,变量--side用作属性名,这是无效的。
三、变量值的类型
如果变量值是一个字符串,可以与其他字符串拼接。
1 2 |
|
利用这一点,可以 debug(例子)。
1 2 3 |
|
如果变量值是数值,不能与数值单位直接连用。
1 2 3 4 5 |
|
上面代码中,数值与单位直接写在一起,这是无效的。必须使用calc()
函数,将它们连接。
1 2 3 4 |
|
如果变量值带有单位,就不能写成字符串。
1 2 3 4 5 6 7 8 9 10 11 |
|
四、作用域
同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的。
相关阅读 >>
更多相关阅读请进入《css》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者