何为css变量
- 随着各种css预编译工具sass,less,stylus的逐渐流行,css中引入变量已经成为一种趋势,因此原生(不知道能否用这个词,权当是css本身好了)css也加入了变量的定义方式
优点
- 在编写css过程中使用变量无非是希望能使用通用的样式,提高性能,降低维护成本
- 在更改样式的时候,我们可以统一修改而无需一个个的去更改样式,十分方便
语法
- css中原生变量定义是通过
--前缀来实现,后面可以自定义变量名称 - 使用方式:
var(--name),这里的name就是自定义的变量名称 - 注意: 变量可以以数字开头,但不能包含
$[^(%等字符,它还有一个强大之处是甚至可以直接使用中文定义变量名称 - 它也有自己的作用域,就像js中的块级作用域一样,大家自行揣摩一下它的作用方式
- 如果遇到了不合法的变量,css会自动使用默认的值代替
- 为了防止变量未定义,可以使用默认值:
var(--name,value)
实战
-
自己定义变量自己使用(这里使用了中文)
div { --绿色:green; background: var(--绿色); height: 100px; width: 100px; }运行效果
效果图 -
上层定义,下层使用(这里通过
:root伪类定义了全局css变量):root { --红色:red; } div { background: var(--红色); height: 100px; width: 100px; }运行效果
在这里插入图片描述 -
上层和自己都定义了,会怎么显示?
:root { --红色:red; } div { --红色:green; background: var(--红色); height: 100px; width: 100px; }
运行效果
在这里插入图片描述
可以看到自己定义的变量覆盖了全局的变量
-
默认值的使用(不定义变量,看看会有什么结果)
div { background: var(--红色,yellow); height: 100px; width: 100px; }
运行效果
在这里插入图片描述
可以看到使用了默认的yellow
-
错误的变量内容
div { --红色:20px; background: var(--红色,yellow); height: 100px; width: 100px; }运行效果....
如你所见,一片空白.
这是因为定义的变量不能用于background,而又因为变量确实存在,所以默认值也不会生效,只是会使用默认的缺省值来代替,也就是transparent,所以会出现空白格现象
结语
- 这个知识点是今天学习JavaScript30天练习的时候发现的,目前只能理解这么多,如果想要了解更多,烦请去参看业界大神的文章
- 对JavaScript30天练习感兴趣的可以到这个链接,它可以帮助你提升原生js能力
- JavaScript30官网
- 也可以通过git clone https://github.com/soyaine/JavaScript30.git 来直接将项目拉到本地进行练习
- 感谢阅读,如有错误,请指正
