進(jìn)階：玩轉(zhuǎn) CSS 變量
作者：wsafight
https://github.com/wsafight/personBlog/issues/25
如果當(dāng)年的 CSS ?預(yù)處理器變量對(duì)于初入前端的我來(lái)說(shuō)是開啟了新世界的大門，那么 CSS 變量對(duì)于我來(lái)說(shuō)無(wú)疑就是晴天霹靂。其功能不但可以優(yōu)雅的處理之前 js 不好處理或不適合的業(yè)務(wù)需求。更在創(chuàng)造力無(wú)窮的前端開發(fā)者手中大放異彩。
基礎(chǔ)用法
在前端的領(lǐng)域中，標(biāo)準(zhǔn)的實(shí)現(xiàn)總是比社區(qū)的約定要慢的多，前端框架最喜歡的 $ 被 Sass 變量用掉了。而最常用的 @ 也被 Less 用掉了。官方為了讓 CSS 變量也能夠在 Sass 及 Less 中使用，無(wú)奈只能妥協(xié)的使用 --。
<style>
??/*?在?body?選擇器中聲明了兩個(gè)變量??*/?
??body?{
????--primary-color:?red;
????/*?變量名大小寫敏感，--primary-color?和?--PRIMARY-COLOR?是兩個(gè)不同變量?*/??
????--PRIMARY-COLOR:?initial;??
??}
??/**?同一個(gè) CSS 變量，可以在多個(gè)選擇器內(nèi)聲明。優(yōu)先級(jí)高的會(huì)替換優(yōu)先級(jí)低的?*/
??main?{
????--primary-color:?blue;
??}
????
??/**?使用?CSS?變量?*/
??.text-primary?{
????/* var()?函數(shù)用于讀取變量。?*/??
????color:?var(--primary-color)
??}
<style>
????
????
<div?class="text-primary">reddiv>?
????
????
<main?class="text-primary">bluemain>
????
?
<div?style='--primary-color:?purple"?class="text-primary">purple????
這里我們可以看到針對(duì)同一個(gè) CSS 變量，可以在多個(gè)選擇器內(nèi)聲明。讀取的時(shí)候，優(yōu)先級(jí)最高的聲明生效。這與 CSS 的"層疊"（cascade）規(guī)則是一致的。
由于這個(gè)原因，全局的變量通常放在根元素:root里面，確保任何選擇器都可以讀取它們。
:root?{
??--primary-color:?#06c;
}
同時(shí)， CSS 變量提供了 JavaScript 與 CSS 通信的方法。就是利用 js 操作 css 變量。我們可以使用：
<style>
??/*?...和上面?CSS?一致?*/??
style>????
????
<div?class="text-primary">reddiv>?
????
????
<main?id='primary'?class="text-primary">bluemain>
????
?
<div?id="secondary"?style='--primary-color:?purple"?class="text-primary">purple????
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>