最近翻大漠老師和張?chǎng)涡翊髱煹奈恼聲r(shí)肥惭，對(duì)CSS自定義屬性非常感興趣，所以就針對(duì)他們的文章自行學(xué)習(xí)理解了一番紊搪。CSS自定義屬性蜜葱？聽(tīng)著怎么那么奇怪呢，屬性還可以自定義嗦明，那不是可以放肆地玩耍笼沥？
名字和用途
其實(shí)CSS自定義屬性還有很多我們更為熟悉的曾用名或者說(shuō)小名，比如CSS變量娶牌、原生變量奔浅、CSS自定義屬性級(jí)聯(lián)變量，沒(méi)錯(cuò)诗良，都是同個(gè)東西汹桦。
啊原來(lái)是變量啊，說(shuō)得那么玄乎鉴裹，但是你可別小看它舞骆，玩得溜的話簡(jiǎn)直帥炸。
說(shuō)到變量径荔，在SASS\LESS等CSS預(yù)編譯工具中大家都已經(jīng)經(jīng)常運(yùn)用督禽，有那么幾點(diǎn)好處：
1总处、能使用顏色變量統(tǒng)一風(fēng)格；
2鹦马、可以采用一致的組件屬性胧谈，包括布局和定位等；
3菱肖、避免代碼冗余等等。
那既然SASS就能做到的東西稳强，我們還有這個(gè)所謂的CSS變量干什么呢？人家自然有它的獨(dú)到之處退疫。
比如可以在運(yùn)行時(shí)改寫(xiě)，具備動(dòng)態(tài)性蹄咖；
比如方便使用JS讀取和改寫(xiě)付鹿；
比如可繼承、可組合舵匾、同時(shí)具有作用域俊抵。
在這幾個(gè)方面，預(yù)編譯工具完全被CSS變量KO了坐梯。
CSS變量語(yǔ)法
語(yǔ)法很簡(jiǎn)單徽诲，分成兩步，聲明變量和使用變量吵血。
聲明變量：
:root{
--*: xxxx;
/* --variable-name: variable-value */
}
這里需要注意幾個(gè)點(diǎn)：
1谎替、變量必須聲明在{}中，如果在這里把它理解為屬性就更好記憶了蹋辅，畢竟我們不會(huì)把CSS屬性寫(xiě)到括號(hào)外邊去钱贯。
2、*號(hào)代表的就是我們給變量起的名字侦另。起名字這事真的很煩人秩命，還好CSS變量的名稱(chēng)限制很少，除了一些特殊關(guān)鍵字符不用使用褒傅，正常來(lái)說(shuō)你用數(shù)字\字母\下劃線_\短橫線-都是沒(méi)問(wèn)題的弃锐，據(jù)說(shuō)還可以使用中文、日文和韓文殿托。
:root{
--黑色: #000;
}
body{
background-color: var(--黑色);
}
手賤如我試了一下霹菊，真的可以。但是我怕寫(xiě)出去被別人打碌尔。
使用變量：
很簡(jiǎn)單浇辜，就是我們很熟悉的var券敌。
:root{
--*: xxxx;
}
.div{
background: var(--*);
}
還有一種設(shè)置默認(rèn)值的使用，就是在變量名稱(chēng)后面柳洋，加上一個(gè)默認(rèn)值待诅。
.div{
background: var(--變量名稱(chēng),[默認(rèn)值]);
}
也就是說(shuō)，當(dāng)這個(gè)變量沒(méi)有被聲明過(guò)的話熊镣，就會(huì)使用默認(rèn)值卑雁，不至于沒(méi)著沒(méi)落的。注意這里的情況是變量沒(méi)有被聲明過(guò)绪囱，要是變量是聲明過(guò)的测蹲，但是使用起來(lái)是不合法的，那么就會(huì)采用原來(lái)屬性的缺省默認(rèn)值鬼吵，并不是后面這個(gè)你設(shè)定的默認(rèn)值扣甲。
p{
background-color: var(--color, #000);
/* --color沒(méi)有聲明過(guò)，所以這里的p背景是黑色的 */
}
p{
--color: 20px;
background-color: var(--color, #000);
/* 很明顯齿椅，background-color: 20px;是語(yǔ)法錯(cuò)誤的琉挖，所以背景色為透明，是這個(gè)屬性的默認(rèn)值 */
}
作用域
1涣脚、如果你需要定義一個(gè)全局的變量示辈，那么可以放在:root根元素下面；
2遣蚀、如果只需要在部分元素\組件下使用矾麻，就定義在相關(guān)的類(lèi)下面险耀；
3粥帚、另外還可以在@media媒體查詢中或者:hover等偽類(lèi)中使用。
權(quán)重
理解了作用域柴灯，那么權(quán)重也是同樣的道理赠群，應(yīng)該CSS變量是可以繼承的旱幼，所以權(quán)重跟我們平時(shí)的屬性權(quán)重理解是一樣的。這里引用一下張?chǎng)涡翊笊竦睦印?br>
變量組合
這里舉了三個(gè)例子匀油，具體的說(shuō)明在注釋中敌蚜。
p{
--fz: 50;
font-size: var(--fz)px;
/* 不要太天真窝爪，這樣是錯(cuò)的 */
}
p{
--fz: 50;
font-size: calc( var(--fz) * 1px);
/* 如果你想這樣用，可以使用calc()函數(shù) */
}
p:after{
--text: "hello";
content: var(--text) " world";
/* 但是字符串的連接是可以實(shí)現(xiàn)的 */
}
當(dāng)然纷跛，變量不止可以直接使用贫奠，直接或者通過(guò)計(jì)算把值傳遞給另一個(gè)變量也是可行的望蜡。
p{
--fz: 20px;
--fz-lg: var(--fz);
font-size: var(--fz-lg);
/* 直接傳遞 */
}
p{
--fz: 20px;
--fz-lg: calc( var(--fz) * 1.5);
font-size: var(--fz-lg);
/* 通過(guò)計(jì)算后傳遞 */
}
在JS中使用CSS變量
讀：getPropertyValue( )
寫(xiě)：setProperty( )
比如說(shuō)泣特，你在:root上定義了一個(gè)color變量状您，用于設(shè)置頁(yè)面的主題色膏孟，那么通過(guò)下面的JS拌汇，你就可以很簡(jiǎn)單地改變color變量的值，從而改變頁(yè)面的主題色魁淳。換個(gè)皮膚界逛，so easy纺座。
// 讀取數(shù)據(jù)
const rootStyles = getComputedStyle(document.documentElement);
const varValue = rootStyles.getPropertyValue('--color').trim();
// 改寫(xiě)數(shù)據(jù)
document.setProperty('--color', value);
最后就是充分發(fā)揮你的想象力，看看CSS變量與JS的結(jié)合能產(chǎn)生什么樣奇妙的效果~最后就附一個(gè)大漠老師的想象力成果吧喳瓣。
