前言
less或sass很早就出現(xiàn)變量的概念沿癞，但是本質(zhì)上還是要編譯成css援雇，缺少靈活性。css3變量就很容易擔(dān)任他們的職責(zé)椎扬，而且不需要安裝loader編譯惫搏。
變量的使用
使用
--來(lái)定義css，并且在:后賦予變量初始值-
在使用變量的地方只需要使用
var()包裹變量即可使用:root { --red: red; } view { color: var(--red); }
變量的命名
-
區(qū)分大小寫(xiě)
:root { --red: red; --Red:yellow; } -
不能使用非法字符（除開(kāi)
_``-）:root { --re#d: red; /* 無(wú)效 */ --red_d:red; /* 可以使用 */ }
變量讀鹊两ⅰ（var()函數(shù)）
-
var()能夠傳入兩個(gè)參數(shù)晶府，第一個(gè)為要使用的變量；第二個(gè)參數(shù)為默認(rèn)值钻趋，如果參數(shù)一變量不存在川陆，那么就會(huì)使用參數(shù)二這個(gè)默認(rèn)值。:root { --red: red; } view { color: var(--red, yellow); /* 字體顏色為紅色蛮位，如果(--red)變量不存在较沪，那么就使用參數(shù)二（yellow） */ }
-
var()函數(shù)用在變量的聲明:root { --red: red; --fRed:var(--red); /* (--red)和(--fRed)存取的值是一樣 */ } -
var()的值只能當(dāng)作css屬性的值，不能做屬性名稱(chēng):root { --red: color; } view { var(--red): red; /* 這樣是無(wú)效的 */ }
變量的值類(lèi)型
-
值為字符串
:root { --red: "red"; } view { color: var(--red); /* 無(wú)效的失仁，因?yàn)椋?-red）只是字符串尸曼，不是css的關(guān)鍵字屬性 */ } view::after{ cotent:var(--red); /* 這樣是可以的，因?yàn)閏ontent的屬性值就是一個(gè)字符串 */ } -
值為數(shù)字
:root { --size: 20; } view { font-size: var(--size)px; /* 無(wú)效萄焦，不能和單位直接拼接 */ font-size: calc(var(--size)*1px);/* 正確 */ } -
值為css合法屬性值(都可以正常使用)
:root { --size: 20px; --color:red; --hidden: hidden; }
變量的作用域
:root代表全局作用域控轿，全局都有效-
使用css變量， 會(huì)采用優(yōu)先級(jí)最高的規(guī)則 拂封，和css的權(quán)重規(guī)則一樣
:root { --color: red; } view { --color: yellow; } view.cs { color: var(--color); }
