css变量
css3变量
-
:root
申明的全局,自定义属性用--
作为前缀:root { /* 表示用-redColor来表示#ffffff颜色 */ --redColor: #ffffff }
-
var(name, value)
来插入使用#app { background: var(-redColor) }
值 描述 name 必需。变量名(以两条破折号开头)。 value 可选。回退值(在未找到变量时使用)。 注释:变量名称必须以两个破折号(--)开头,且区分大小写!
修改:用JavaScript和媒体查询来修改
优点
- 可维护性:如果没有CSS变量需要手动改变大量的属性值,使用批量处理查找和替换,可能会影响其他样式规则。使用CSS变量只用改变定义时的值。
- 提高CSS可读性:可以通过变量名判断属性内容