CSS變量使用解析

很早直接就了解到css變量相關(guān)的內(nèi)容，奈何之前使用價值不高（很多主流瀏覽器不兼容）

最近發(fā)現(xiàn)主流瀏覽器都已經(jīng)支持了這一變化

這一重要的變化，可能會讓你發(fā)現(xiàn)，原生css從此變的異常強(qiáng)大~，下面看一下如何使用

變量的聲明

css的變量聲明標(biāo)識符為：--，即變量名前面加2個連接線

body {  --head_color: #000;  --head_bar: #F7EFD2;}

上面代碼中，body選擇器里面聲明了兩個變量。它與正常的屬性定義上沒有什么不同，只是沒有默認(rèn)含義，所以其又叫做CSS自定義屬性

這里需要注意的是，其變量名對大小寫是敏感的。

變量的引用

變量的引用也很簡單，它為我們提供了一個方法專門進(jìn)行引用，var()函數(shù)用于讀取變量。

.head {  color: var(--head_color);}

這樣就引用了，另外，如果你擔(dān)心變量沒有定義，它還提供了默認(rèn)值的設(shè)置方式。

可以使用第二個參數(shù)，表示變量的默認(rèn)值。如果該變量不存在，就會使用這個默認(rèn)值。

color: var(--head_color, #7F583F);

需要注意的是，變量值只能用作屬性值，不能用作屬性名。

如果變量值是數(shù)值，不能與數(shù)值單位直接連用。

.a {  --gap: 20;  /* 無效 */  margin-top: var(--gap)px;}

數(shù)值與單位直接寫在一起，必須使用calc()函數(shù)，將它們連接。

.a{  --gap: 20;  margin-top: calc(var(--gap) * 1px);}

作用域

變量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用。所以，如果你的變量是全局享用的，則建議放在:root上，例如：

:root {    --color: red;}

當(dāng)然，也可以使用body或者h(yuǎn)tml標(biāo)簽：

body {    --color: red;}

CSS變量就像js的變量，每個類名或者花括號就像一個function，里面的變量只有上下文以內(nèi)可以獲取，這就讓CSS有了更多可能性。

這使得外部變量稍微改變，整個CSS都可以大大聯(lián)動，且是實(shí)時的。

本文完?