wcssdu 2019-06-28
CSS 变量当前有两种形式:
变量,就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如:var(--example-variable)会返回--example-variable所对应的值
自定义属性。这些属性使用--where的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量
变量声明使用两根连词线--表示变量,$color是属于Sass的语法,@color是属于Less的语法,为避免冲突css原生变量使用--)
注意: 变量名大小写敏感,--header-color
和--header-color
是两个不同变量
CSS变量声明的方式非常简单,如下,声明了一个名叫color的CSS变量。
body{ --color: red; } <body style="--color: red;"></body> document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')
如果变量值是一个字符串,可以与其他字符串拼接
--bar: 'hello'; --foo: var(--bar)' world'; 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); }
如果变量值带有单位,就不能写成字符串
/* 无效 */ .foo { --foo: '20px'; font-size: var(--foo); } /* 有效 */ .foo { --foo: 20px; font-size: var(--foo);
注意: 变量值只能用作属性值,不能用作属性名
.foo { --side: margin-top; /* 无效 */ var(--side): 20px; }
上面代码中,变量--side用作属性名,这是无效的
自定义属性同样支持继承。一个元素上没有定义自定义属性,该自定义属性的值会继承其父元素
class="one"> <div class="two"> <div class="three"> </div> <div class="four"> </div> <div> </div>
定义下面的CSS:
.two { --test: 10px; } .three { --test: 2em; }
在这个例子中,var(--test)的结果是:
最顶层的作用域就是:root
div { --color: #7F583F; --bg: #F7EFD2; } .mediabox { color: var(--color); background: var(--bg); } @media screen and (min-width: 768px) { body { --color: #F7EFD2; --bg: #7F583F; } }
1、预处理器变量不是实时的
$color:#7F583F; @media screen and (min-width: 768px) { $color: #F7EFD2; } .mediabox { background: $color; }
编译结果
.mediabox { background: #7F583F; }
2、预处理器不能限定作用域
$zcolor:blue; .ulbox { $zcolor:red; } ul{ color: $zcolor; }
编译为
ul { color: blue; }
3、预处理器变量不可互操作
原生的CSS自定义属性可以与任何CSS预处理器或纯CSS文件一起使用
CSS 变量可以和 JS 互相交互
:root{ --testMargin:70px; } // 读取 var root = getComputedStyle(document.documentElement); var cssVariable1 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable1); // '70px' // 写入 document.documentElement.style.setProperty('--testMargin', '100px'); var cssVariable2 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable2); // '100px' // 删除 document.documentElement.style.removeProperty('--testMargin'); var cssVariable3 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable3); // '70px'
检测浏览器是否支持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'); }
https://caniuse.com/#search=c...
相较于传统的 LESS 、SASS 等预处理器变量,CSS 变量的优点在于: