【CSS】841- 玩轉(zhuǎn) CSS 變量

如果當(dāng)年的 CSS ?預(yù)處理器變量對(duì)于初入前端的我來(lái)說(shuō)是開(kāi)啟了新世界的大門(mén)，那么 CSS 變量對(duì)于我來(lái)說(shuō)無(wú)疑就是晴天霹靂。其功能不但可以?xún)?yōu)雅的處理之前 js 不好處理或不適合的業(yè)務(wù)需求。更在創(chuàng)造力無(wú)窮的前端開(kāi)發(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;
????/*?變量名大小寫(xiě)敏感，--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