CSS變量能幫助我們干什么
在一些命令式編程語言中，像Java薇搁、C++亦或是JavaScript，通過變量我們能夠跟蹤某些狀態(tài)屡拨。變量是一種符號只酥，關(guān)聯(lián)著一個特定的值，變量的值能隨著時間的推移而改變呀狼。
在像CSS這種聲明式語言中裂允，隨著時間而改變的值并不存在，也就沒有所謂變量的概念了哥艇。
CSS 引入了一種層級變量的概念绝编，從而能夠從容應(yīng)對可維護(hù)性的挑戰(zhàn)。這就會使得在整個 CSS tree 中都可以象征性的引用一個變量
一貌踏、什么是CSS變量
CSS 變量當(dāng)前有兩種形式：
變量十饥，就是擁有合法標(biāo)識符和合法的值∽嫒椋可以被使用在任意的地方逗堵。可以使用var()函數(shù)使用變量眷昆。例如：var(--example-variable)會返回--example-variable所對應(yīng)的值
自定義屬性蜒秤。這些屬性使用--where的特殊格式作為名字。例如--example-variable: 20px;即使一個css聲明語句亚斋。意思是將20px賦值給--example-varibale變量
二作媚、變量的聲明
變量的命名
變量聲明使用兩根連詞線--表示變量，$color是屬于Sass的語法帅刊，@color是屬于Less的語法纸泡，為避免沖突css原生變量使用--）
注意: 變量名大小寫敏感，--header-color和--Header-Color是兩個不同變量
聲明方式
CSS變量聲明的方式非常簡單赖瞒，如下女揭，聲明了一個名叫color的CSS變量蚤假。
- 在css文件中寫
- 寫在html標(biāo)簽的inline-style里
- 用JS給某個元素聲明，方法.style.setProperty
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);
}
如果變量值是數(shù)值勤哗，不能與數(shù)值單位直接連用,必須使用calc()函數(shù)，將它們連接
.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用作屬性名欧穴，這是無效的
三、CSS變量的繼承&作用域
自定義屬性同樣支持繼承泵殴。一個元素上沒有定義自定義屬性涮帘，該自定義屬性的值會繼承其父元素
class="one">
<div class="two">
<div class="three">
</div>
<div class="four">
</div>
<div>
</div>
定義下面的CSS：
.two { --test: 10px; }
.three { --test: 2em; }
在這個例子中，var(--test)的結(jié)果是：
- class="two" 對應(yīng)的節(jié)點: 10px
- class="three" 對應(yīng)的節(jié)點: element: 2em
- class="four" 對應(yīng)的節(jié)點: 10px (inherited from its parent)
- class="one" 對應(yīng)的節(jié)點: 無效值, 即此屬性值為未被自定義css變量覆蓋的默認(rèn)值
最頂層的作用域就是:root
四笑诅、響應(yīng)式
div {
--color: #7F583F;
--bg: #F7EFD2;
}
.mediabox {
color: var(--color);
background: var(--bg);
}
@media screen and (min-width: 768px) {
body {
--color: #F7EFD2;
--bg: #7F583F;
}
}
五调缨、與預(yù)處理器的不同
1、預(yù)處理器變量不是實時的
$color:#7F583F;
@media screen and (min-width: 768px) {
$color: #F7EFD2;
}
.mediabox {
background: $color;
}
編譯結(jié)果
.mediabox {
background: #7F583F;
}
2吆你、預(yù)處理器不能限定作用域
$zcolor:blue;
.ulbox {
$zcolor:red;
}
ul{
color: $zcolor;
}
編譯為
ul {
color: blue;
}
3弦叶、預(yù)處理器變量不可互操作
原生的CSS自定義屬性可以與任何CSS預(yù)處理器或純CSS文件一起使用
六、JS操作變量
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=css%20var
總結(jié)
相較于傳統(tǒng)的 LESS 伤哺、SASS 等預(yù)處理器變量，CSS 變量的優(yōu)點在于:
- CSS 變量的動態(tài)性者祖，能在頁面運行時更改立莉，而傳統(tǒng)預(yù)處理器變量編譯后無法更改
- CSS 變量能夠繼承，能夠組合使用七问，具有作用域
- 配合 Javascript 使用蜓耻，可以方便的從 JS 中讀/寫
參考
CSS 變量教程
使用CSS變量
CSS變量和預(yù)處理器變量的差異
