刚开始的“css变量”,经扩展以后,称为“css自定义属性”
当各类预处理器满天飞的时候,css变量已经开始渐渐普及
在特定的应用场景,css变量确实发挥了很大的做用
下面开始学习css变量css
CSS选择器不能是数字开头,JS中的变量是不能直接数值的,可是,在CSS变量中,这些限制统统没有。 但不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,可是能够是中文,日文或者韩文。git
1. 声明:大小写敏感, --variable-name: variable-value;github
:root{ --color: red; }
2. 使用:使用var(变量名)来使用一个变量浏览器
#div { color: var(color) }
3. 变量组合使用
使用变量的时候,一般不会单独使用,能够组合使用
当变量的值是字符串时,能够直接拼接,以下sass
:root{ --screen-category: 'category' //变量值是字符串 } body:after { content: '--screen-category: 'var(--screen-category); // 直接拼接 }
当变量的值是数值时,必须使用calc()函数计算,就算仍是简单的单位拼接app
.foo { --gap: 20; /* 无效 */ margin-top: var(--gap)px; } .foo { --gap: 20; margin-top: calc(var(--gap) * 1px); }
4. 变量未定义和错误定义
若是咱们使用的变量没有定义,则使用后面的值做为元素的属性值, 以下所示
body里面访问不到.box定义的--1,所以使用#cd0000less
.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. 继承
<div class="wrapper"> <div class="content1"></div> <div class="content2"></div> </div> .wrapper { --color: red; } .content1 { --color: yellow; }
content1的--color为yellow
content2的--color没有定义,继承了wrapper的--color为red
--color: yellow只在content1的做用域内有效
: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交互
基本上能兼容大部分主流浏览器,直接使用没有太大问题
若是想使用但又想兼容全部浏览器,就是用下面的方法检测浏览器是否支持CSS自定义属性的方法
/*css*/ @supports ( (--a: 0)) { /* supported */ } @supports ( not (--a: 0)) { /* not supported */ } // Js if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) { alert('CSS properties are supported'); } else { alert('CSS properties are NOT supported'); }
这里是经常使用场景的demo:https://github.com/shinyshine...