關(guān)于CSS3變量

聲明變量的時(shí)候悔橄，變量名前面要加兩根連詞線（--）靶累。

body{
    --color:red;
}

上面代碼中，body選擇器里面聲明了一個(gè)自定義變量：--color 癣疟。

它與color等正式屬性沒(méi)有什么不同挣柬，只是沒(méi)有默認(rèn)含義。所以 CSS 變量（CSS variable）又叫做“CSS 自定義屬性"（CSS custom properties）——因?yàn)樽兞颗c自定義的 CSS 屬性其實(shí)是一回事睛挚。
而且邪蛔，各種值都可以‘放入’CSS變量，CSS變量可以放在‘任何地方’扎狱。

當(dāng)然侧到，類似的介紹網(wǎng)上一搜一堆，我們就暫且不論淤击，進(jìn)入正題匠抗！

但像一些基本應(yīng)用，比如：全局通用顏色/大小值污抬、網(wǎng)頁(yè)換膚之類的本文就不予討論了汞贸，大家可自行探索

起因 —— “選項(xiàng)卡”的重構(gòu)

記得筆者曾為社團(tuán)官網(wǎng)做過(guò)的一個(gè)項(xiàng)目中有一個(gè)用于宣傳的“選項(xiàng)卡”組件：
[圖片上傳失敗...(image-a1b1c2-1602062372355)]

<div class="main-left-bottoms">
    <div id="tabs">
        <ul>
            <li class="on"><a name="錨點(diǎn)">社團(tuán)活動(dòng) </a></li>
            <li>社團(tuán)方向</li>
            <li>社長(zhǎng)寄語(yǔ)</li>
            <li>人才戰(zhàn)略</li>
        </ul>
        <div>
            <p>優(yōu)C社團(tuán)自成立以來(lái)，舉辦了大量的活動(dòng)印机，用以豐富社團(tuán)成員的課余生活矢腻，達(dá)到勞逸結(jié)合的目的，事實(shí)證明射赛，這樣也確實(shí)有效多柑。<br>
                比如，</p>
            <ol>
                <li>在母親節(jié)楣责，我們跟隨校方一起舉辦了<a >
                    “孝·母親節(jié)”活動(dòng)</a>（視頻加載可能有些慢）,并取得了巨大的成功顷蟆；</li>
                <li>在冬至?xí)r，我們跟隨校方腐魂，以及各宿舍樓一起舉辦了<a >“冬至包餃子”活動(dòng)</a>,大家都玩得非常歡樂(lè)帐偎；</li>
                <li>在閑暇時(shí)，我們還積極參與院方舉辦的<a >“敬老院慰問(wèn)”活動(dòng)</a>,體會(huì)非凡蛔屹；</li>
            </ol>
        </div>
        <div class="hide">
            <p>&nbsp;&nbsp;優(yōu)C工作室創(chuàng)建于2009年削樊，距今已有<span id="fffffyear"></span>年歷史。<br>&nbsp;&nbsp;經(jīng)過(guò)這些年的發(fā)展，本社團(tuán)出現(xiàn)了各個(gè)方向的人才漫贞，有PHP甸箱、java、JavaWeb迅脐、
                大數(shù)據(jù)等等芍殖。。谴蔑。<font color="red">本社團(tuán)現(xiàn)今主流學(xué)習(xí)方向?yàn)镴avaWeb豌骏，即后端實(shí)現(xiàn)，較偏向于網(wǎng)站的開(kāi)發(fā)隐锭。</font> <br>&nbsp;&nbsp;社團(tuán)經(jīng)常通過(guò)相應(yīng)的交流活動(dòng)來(lái)完成一個(gè)項(xiàng)目的開(kāi)發(fā)窃躲，
                以增進(jìn)對(duì)知識(shí)的總結(jié)，社員會(huì)不定時(shí)的參加一些競(jìng)賽钦睡，并都取得了不錯(cuò)的成績(jī)蒂窒。<br><br>
                <font color="#ff7f50"> 具體個(gè)人規(guī)劃請(qǐng)掃描右側(cè)彈出二維碼詢問(wèn)學(xué)長(zhǎng)！</font></p>
        </div>
        <script>
            document.getElementById('fffffyear').innerHTML = (new Date().getFullYear() - 2009) + '';
        </script>
        <div class="hide">
            <br><br>
            <p>雖然伴隨著不斷地有人加入荞怒、退出洒琢，但是，優(yōu)C仍然在這里褐桌，等著你們纬凤，并且我堅(jiān)信：優(yōu)C的未來(lái)一定會(huì)更加輝煌！</p> <p>——社長(zhǎng)心愿</p>
        </div>
        <div class="hide">
            <br>
            <p>加入我們撩嚼，加入優(yōu)C。<br><font color="#ff7f50">這里挖帘，有絕妙的知識(shí)體驗(yàn)完丽，腦洞大開(kāi)的學(xué)長(zhǎng)學(xué)姐，帶你探索知識(shí)拇舀，學(xué)習(xí)技巧逻族，實(shí)操項(xiàng)目，應(yīng)對(duì)面試骄崩。</font><br>
                在這里聘鳞，有你想象不到的快樂(lè)！Ｒ鳌抠璃！</p>
        </div>
    </div>
</div>

.main-left-bottoms{width: 100%;min-height: 280px;margin-top: 10px;}
.main-left-bottoms h1{color: orangered;font-style: italic;}
.main-left-bottoms #tabs{width: 99%;padding:5px;min-height: 280px;}
.main-left-bottoms #tabs ul{list-style:none;display:block;min-height:30px;line-height:30px;border-bottom:2px red solid;}
.main-left-bottoms #tabs ul li{cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0 3px;border:2px groove orangered;border-bottom:none;display:inline-block;width:65px;text-align:center;font-weight: bold;color: black;padding: 0 10px;}
.main-left-bottoms #tabs ul li.on{border-bottom:2px solid skyblue;}
.main-left-bottoms #tabs div{min-height: 199px;line-height:25px;border-top:none;padding:0.3125em;overflow:hidden;}
#tabs div p{font-size: 0.838rem;}
#tabs div ol li{font-size: 0.875rem;margin-top: 5px;}
#tabs div ol li a{color: lightcoral;text-decoration: none;}
#tabs div ol li a:hover{color: orange;}
.main-left-bottoms .hide{display:none;}

然后通過(guò)JS為div點(diǎn)擊元素之外的（同級(jí)）元素加上類名hide即可，非常簡(jiǎn)單脱惰。

后來(lái)學(xué)的多了搏嗡，也越來(lái)越重視“用戶體驗(yàn)”，想到：如果能讓瀏覽器“記住”用戶退出前瀏覽的地方，不管是頁(yè)面采盒、tab或者列表旧乞？那該多好啊。
于是就嘗試「用ajax輔助瀏覽器state列表」達(dá)到了整體頁(yè)面上的切換保存效果（點(diǎn)擊去這里）磅氨。這確實(shí)是一種好方法尺栖，但在我逐步推出了CSS系列文章后，就比較“貪心”了：能不能不用JavaScript就達(dá)到這種效果烦租？ —— ::target 延赌！

（這個(gè)之后我會(huì)再推出專題文章討論，在這里說(shuō)總會(huì)有些“喧賓奪主”左权。皮胡。。）

再往后赏迟，CSS3推出了“自定義變量”屬性屡贺，正巧碰上官網(wǎng)頁(yè)面用vue重構(gòu)，于是想著用CSS3變量把這一塊重做一遍吧：

CSS3變量實(shí)現(xiàn)tab切換

[圖片上傳失敗...(image-6a48a9-1602062372354)]

上面這個(gè)看似順滑的tab切換效果其實(shí)很簡(jiǎn)單（使用vue+scss完成）：
要知道：JS中有3個(gè)針對(duì)style操作變量的API

• 讀取變量：elem.style.getPropertyValue()
• 設(shè)置變量：elem.style.setProperty()
• 刪除變量：elem.style.removeProperty()

<div class="tab-navbar">
    <nav>
        <a v-for="(v, i) in list" :key="v" :class="{ active: index === i }" @click="select(i)">標(biāo)題{{i + 1}}</a>
    </nav>
    <div>
        <ul ref="tabs" :style="`--tab-count: ${list.length}`">
            <li v-for="(v, i) in list" :key="v" :style="`--bg-color: ${v}`">我是內(nèi)容{{i + 1}}</li>
        </ul>
    </div>
</div>

.tab-navbar {
    display: flex;
    overflow: hidden;
    border-radius: 10px;
    width: 300px;
    height: 200px;
    nav {
        display: flex;
        height: 40px;
        background-color: #f0f0f0;
        line-height: 40px;
        text-align: center;
        a {
            flex: 1;
            cursor: pointer;
            transition: all 300ms;
            &.active {
                background-color: #3c9;
                color: #fff;
            }
        }
    }
    div {
        flex: 1;
        ul {
            --tab-index: 0;
            --tab-width: calc(var(--tab-count) * 100%);
            --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);
            display: flex;
            flex-wrap: nowrap;
            width: var(--tab-width);
            height: 100%;
            transform: translate3d(var(--tab-move), 0, 0);
            transition: all 300ms;
        }
        li {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            background-color: var(--bg-color);
            font-weight: bold;
            font-size: 20px;
            color: #fff;
        }
    }
}

在<ul>上定義--tab-index表示Tab當(dāng)前的索引锌杀，當(dāng)點(diǎn)擊按鈕時(shí)重置--tab-index的值甩栈，可實(shí)現(xiàn)不操作DOM移動(dòng)<ul>的位置顯示指定的Tab。不操作DOM而可移動(dòng)<ul>是因?yàn)槎x了--tab-move糕再，通過(guò)calc()計(jì)算--tab-index與--tab-move的關(guān)系所森，從而操控transform:translate3d()移動(dòng)<ul>。

export default {
    data() {
        return {
            index: 0,
            list: ["#09f", "#f90", "#66f", "#f66"]
        };
    },
    methods: {
        select(i) {
            this.index = i;
            this.$refs.tabs.style.setProperty("--tab-index", i);
        }
    }
};

另外开镣，在<li>上定義--bg-color表示Tab的背景色哗咆，也是一種比較簡(jiǎn)潔的模板賦值方式，總比寫<li :style="backgroundColor:${color}">要好看一些 —— 若多個(gè)屬性依賴一個(gè)變量賦值猾担，那么使用變量賦值到style上就更方便了袭灯，那些屬性可在css文件里計(jì)算與賦值，這樣可幫助JS分擔(dān)一些屬性計(jì)算工作绑嘹，大大提高了渲染性能稽荧。

想來(lái)，上面的這一個(gè)案例肯定不能過(guò)足客官的癮工腋，那么：

CSS3自定義變量實(shí)現(xiàn)‘另類的’loading加載條

[圖片上傳失敗...(image-bc74c9-1602062372353)]

<ul class="strip-loading">
    <li style="--line-index: 0"></li>
    <li style="--line-index: 1"></li>
    <li style="--line-index: 2"></li>
    <li style="--line-index: 3"></li>
    <li style="--line-index: 4"></li>
    <li style="--line-index: 5"></li>
</ul>

.strip-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    li {
        --time: calc(var(--line-index) * 200ms);
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1.5s ease-in-out var(--time) infinite;
        & + li {
            margin-left: 5px;
        }
    }
}
@keyframes beat {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
}

var() 計(jì)算函數(shù)配合自定義變量作為animation動(dòng)畫的delay出現(xiàn)姨丈，讓每個(gè)元素都擁有“自己的”延遲時(shí)間 —— CSS3變量大大簡(jiǎn)化了以前CSS中由 :nth-child(N) 帶來(lái)的一定程度上的代碼冗余。

炫酷的鼠標(biāo)移入跟蹤特效

說(shuō)來(lái)也巧擅腰，在我寫這篇文章之前蟋恬，恰好有一個(gè)社團(tuán)后端的學(xué)長(zhǎng)建議搞一個(gè)炫酷的button按鈕代替原來(lái)的提交按鈕：
[圖片上傳失敗...(image-4d295a-1602062372353)]

改后效果大概是這樣的：
[圖片上傳失敗...(image-7c5b1f-1602062372353)]

其實(shí)當(dāng)時(shí)“第一版”背景顏色用了linear-gradient+animation+hue-rotate，但是學(xué)長(zhǎng)說(shuō)太花里胡哨了…嘿嘿趁冈，你們可以嘗試下

其實(shí)思路也比較簡(jiǎn)單筋现，先對(duì)按鈕布局和著色，然后使用偽元素標(biāo)記鼠標(biāo)的位置，定義--x和--y表示偽元素在按鈕里的坐標(biāo)矾飞，通過(guò)JS獲取鼠標(biāo)在按鈕上的offsetX和offsetY分別賦值給--x和--y一膨，再對(duì)偽元素添加徑向漸變的背景色，大功告成洒沦，一個(gè)酷炫的鼠標(biāo)懸浮跟蹤效果就這樣誕生了豹绪。

<button class="track-btn">
    <span>少年，點(diǎn)我吧申眼，我將賜予你力量</span>
</button>

.track-btn {
    margin: 0;
    padding: 0;
    /*自定義邊框*/
    border: 0;
    /*消除默認(rèn)點(diǎn)擊藍(lán)色邊框效果*/
    outline: none;
    -webkit-appearence: none;
    overflow: hidden;
    position: relative;
    border-radius: 25px;
    height: 49.9px;
    background-color: #66f;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    padding: 0 20px;
    span {
        position: relative;
        pointer-events: none;
    }
    &::before {
        --size: 0;
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        background-image: radial-gradient(circle closest-side, #09f, transparent);
        content: "";
        transform: translate3d(-50%, -50%, 0);
        transition: width 200ms ease, height 200ms ease;
    }
    &:hover::before {
        --size: 200px;
    }
}

const btn = document.getElementsByClassName("track-btn")[0];

btn.addEventListener("mousemove", e => {
    btn.style.setProperty("--x", `${e.offsetX}px`);
    btn.style.setProperty("--y", `${e.offsetY}px`);
});

你還可以在此之上添加更加優(yōu)秀的動(dòng)畫瞒津！

現(xiàn)實(shí)&展望

前面說(shuō)了：css3變量你可以‘放在’任何地方 —— 事實(shí)上，哪怕是“不常為人所知”的 ::root 中括尸，都可以作為單獨(dú)存放變量的“凈土”

//引用/修改root中的css3變量值
document.documentElement.style.setProperty("名",值)

現(xiàn)在大多數(shù)網(wǎng)站都會(huì)根據(jù)頁(yè)面響應(yīng)式定義布局中項(xiàng)目之間的默認(rèn)間距及頁(yè)面上所有不同部分的默認(rèn)padding巷蚪、字體大小甚至排版布局。但很多時(shí)候濒翻，我們只能通過(guò)不同的“外鏈css文件”切換或者小范圍內(nèi)改變所有相應(yīng)的屬性值屁柏。但這會(huì)導(dǎo)致一點(diǎn)：在沒(méi)有到達(dá)“下一個(gè)“media臨界值”之前，總會(huì)有一些距離出現(xiàn)“意外”有送，比如：在某一段document.documentElement.clientWidth || document.body.clientWidth;內(nèi)淌喻，元素之間的間距會(huì)很大，但在較小的屏幕上空間不足以承受太多空白而且在之前或之后雀摘，其間距又會(huì)“突變”裸删。

:root { 
    --size: 1.5em; 
} 
@media (min-width: 30em) { 
    :root { 
        --size: 2em; 
    } 
} 
.Container { 
    margin: 0 auto; 
    max-width: 60em; 
    font-size: var(--size); 
}

我們還可以在js中監(jiān)聽(tīng)resize頁(yè)面大小改變以實(shí)時(shí)改變 --size 的值，而且變量越多阵赠，節(jié)省的代碼更多涯塔。 —— 這在以前只能寄希望于引入scss / less庫(kù)了。

自定義屬性填補(bǔ)了scss/less中預(yù)處理器變量在某些場(chǎng)景下不能正確使用的空白清蚀。但是匕荸，不管從兼容性還是目前發(fā)展來(lái)看，在許多情況下使用預(yù)處理器變量仍是比較優(yōu)雅的選擇轧铁。一段時(shí)間內(nèi)很多網(wǎng)站應(yīng)該仍會(huì)將兩者結(jié)合使用：自定義屬性用于動(dòng)態(tài)主題，預(yù)處理器變量用于靜態(tài)模板旦棉。