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