進階：玩轉(zhuǎn) CSS 變量

如果當年的 CSS ?預(yù)處理器變量對于初入前端的我來說是開啟了新世界的大門，那么 CSS 變量對于我來說無疑就是晴天霹靂。其功能不但可以優(yōu)雅的處理之前 js 不好處理或不適合的業(yè)務(wù)需求。更在創(chuàng)造力無窮的前端開發(fā)者手中大放異彩。

基礎(chǔ)用法

在前端的領(lǐng)域中，標準的實現(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