CSS自定义属性

CSS自定义属性也称为CSS变量,允许命名任意的CSS属性名(以"--"开头作标记,后面可以是数字、字母、下划线、连字符等,但不能包含%、(、^、[、$等字符 ),先看个例子。

上面代码中使用了var()函数,下面对函数的进行说明。
var()函数要点:
1.可接收第二个参数作为缺省值。
2.可用自定义的属性做为参数。
下面代码中以gray为缺省值,在自定义变量没有赋值时,变为灰色。 下面的两行代码属性相同。

在了解了CSS自定义的基础使用方法后,下面了解几点相关属性。

一.使用范围
使用预处理器,可以在任何位置声明和使用变量,包括外部声明块和媒体查询。在选择器中和常规CSS属性使用范围相同。CSS自定义属性也可以在媒体元素中使用。

下面显示了sass、less的代码,与CSS自定义主要区别有两点。预处理器中用键值对的方法赋值和var()的形式不同。sass、less代码编译成CSS后与常规CSS代码相同,而CSS自定义代码则在编译后仍可以通过改变原属性值达到改变多个元素的属性效果。

二.级联和作用域
1.可在根元素:root里定义全局属性,然后可在任何属性位置调用。
2.可在需要其他值的模块对属性重新赋值,模块中新值限制性最大有最高优先级所以能用新值。

三.浏览器兼容

四.calc()计算
1.calc()能带单位计算

五.JavaScript改变属性
1.自定义属性能通过 getPropertyValue 和 setProperty 两种JS方法操作,处理多个元素非常方便。

回主页
下一页