css 层叠样式表之 var 函数

小渣渣

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。

语法

方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

测试代码如下：

登录可见。

效果图如下：



我们定义了两个class样式，.fsize 可以找得到我们定义好的 --font-size 变量，所以会显示 20px，.fsize2 找不到 --font-size-test 的定义，所以会使用函数的第二个值，也就是 50px。

备注：定义变量两个破折号开始。

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/var