本文共 2279 字,大约阅读时间需要 7 分钟。
原文链接:https://segmentfault.com/a/1190000015948538
欢迎访问个人博客网站:
复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。另一个好处是语义化的标识。比如,–main-text-color 会比 #00ff00 更易理解,尤其是这个颜色值在其他上下文中也被使用到。
在CSS自定义属性出现之前,CSS变量只能在一些CSS预处理器中使用,如less,scss等
CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但是,在CSS变量中,这些限制通通没有。 但不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文。
1. 声明:大小写敏感, --variable-name: variable-value;
:root{ --color: red;}
2. 使用:使用var(变量名)来使用一个变量
#div { color: var(color)}
3. 变量组合使用
使用变量的时候,通常不会单独使用,可以组合使用
当变量的值是字符串时,可以直接拼接,如下:root{ --screen-category: 'category' //变量值是字符串}body:after { content: '--screen-category: 'var(--screen-category); // 直接拼接}
当变量的值是数值时,必须使用calc()函数计算,就算还是简单的单位拼接
.foo { --gap: 20; /* 无效 */ margin-top: var(--gap)px;}.foo { --gap: 20; margin-top: calc(var(--gap) * 1px);}
4. 变量未定义和错误定义
如果我们使用的变量没有定义,则使用后面的值作为元素的属性值, 如下所示
body里面访问不到.box定义的–1,因此使用#cd0000.box { --1: #369; }body { background-color: var(--1, #cd0000);}
使用变量时,若变量已定义,但是变量的值不正确,则使用缺省值,如:
body { --color: 20px; background-color: #369; background-color: var(--color, #cd0000);}
结果body的颜色是transparent,因为background-color的缺省值就是transparent
1. 作用域
使用:root{}来定义全局css变量
想让变量在局部可用,就定义在某个特定的选择器下 还是下面这段代码:root{ color: red; //全局可用}.box { --1: #369; //只在.box这个作用域可用 }body { background-color: var(--1, #cd0000);}
2. 继承
.wrapper { --color: red;}.content1 { --color: yellow;}
content1的–color为yellow
content2的–color没有定义,继承了wrapper的–color为red –color: yellow只在content1的作用域内有效三、js操作css变量
:root { --color: red;}
//读取var root = getComputedStyle(document.documentElement);var color = root.getPropertyValue('--color').trim();console.log(color); // '70px'//改变document.documentElement.style.setProperty('--color', 'yellow');var color = root.getPropertyValue('--color').trim();console.log(color); // '100px'//删除document.documentElement.style.removeProperty('--color');var color = root.getPropertyValue('--color').trim();console.log(color); // '70px'
1. css变量:
动态性,可以在运行时更改可以方便地从js读写可继承,可组合,有作用域
2. 预处理器:
预处理器的变量不是动态的,在运行时不可更改预处理器的变量没有作用域的说法不能与js交互
六、常用场景
为风格统一而使用颜色变量
一致的组件属性(布局,定位等) 避免代码冗余(响应式布局,制动动画)转载地址:http://hjca.baihongyu.com/