本篇文章帶大家了解一下CSS變量，介紹一下CSS變量的用法，看看如何巧用CSS變量，讓你的CSS變得更心動(dòng)，讓你的項(xiàng)目更加炫酷！

CSS變量又叫CSS自定義屬性，為什么會(huì)突然提起這個(gè)很少人用到的東西呢？因?yàn)樽罱谥貥?gòu)個(gè)人官網(wǎng)，不知道為什么突然喜歡用上CSS變量，可能其自身隱藏的魅力，讓筆者對(duì)它刮目相看。

談到為什么會(huì)在CSS中使用變量，下面舉個(gè)栗子，估計(jì)大家一看就會(huì)明白。

/* 不使用CSS變量 */ .title {     background-color: red; } .desc {     background-color: red; }  /* 使用CSS變量 */ :root {     --bg-color: red; } .title {     background-color: var(--bg-color); } .desc {     background-color: var(--bg-color); }

看完可能會(huì)覺得使用CSS變量的代碼量多了一點(diǎn)，但是有沒有想到突然某天萬惡的策劃小哥哥和設(shè)計(jì)小姐姐說要做一個(gè)換膚功能。按照平常的思路，估計(jì)有些同學(xué)就會(huì)按照默認(rèn)顏色主題增加一份對(duì)照的新顏色主題CSS文件。這樣每次新增需求都同時(shí)維護(hù)幾套主題顏色多麻煩啊。

此時(shí)CSS變量就派上用場(chǎng)了，提前跟設(shè)計(jì)小姐姐規(guī)范好各種需要變換的顏色并通過CSS變量進(jìn)行定義，通過JS批量操作這些定義好的CSS變量即可。這也是變換主題顏色的一種解決方案之一，好處在于只需寫一套CSS代碼。

["red", "blue", "green"].forEach(v => {     const btn = document.getElementById(`${v}-theme-btn`);     btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v)); });

在此總結(jié)下CSS使用變量的好處：

• 減少樣式代碼的重復(fù)性
• 增加樣式代碼的擴(kuò)展性
• 提高樣式代碼的靈活性
• 增多一種CSS與JS的通訊方式
• 不用深層遍歷DOM改變某個(gè)樣式

可能有些同學(xué)會(huì)問，Sass和Less早就實(shí)現(xiàn)了變量這個(gè)特性，何必再多此一舉呢?？墒羌?xì)想一下，CSS變量對(duì)比Sass和Less的變量，又有它的過人之處。

• 瀏覽器原生特性，無需經(jīng)過任何轉(zhuǎn)譯就可直接運(yùn)行
• DOM對(duì)象一員，極大便利了CSS與JS之間的聯(lián)系

認(rèn)識(shí)

本來打算用一半篇幅講述CSS變量的規(guī)范和用法，但是網(wǎng)上一搜一大把就感覺沒必要了，貼上阮一峰老師寫的教程《CSS變量教程》。同時(shí)筆者也對(duì)CSS變量的細(xì)節(jié)地方進(jìn)行一個(gè)整理，方便大家記憶。

• 聲明：--變量名
• 讀?。?code>var(--變量名, 默認(rèn)值)
• 類型
  • 普通：只能用作屬性值不能用作屬性名
  • 字符：與字符串拼接 "Hello, "var(--name)
  • 數(shù)值：使用calc()與數(shù)值單位連用 var(--width) * 10px
• 作用域
  • 范圍：在當(dāng)前元素塊作用域及其子元素塊作用域下有效
  • 優(yōu)先級(jí)別：內(nèi)聯(lián)樣式 > ID選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器

接下來使用幾個(gè)特別的場(chǎng)景展示CSS變量的魅力。還是那句話，一樣?xùn)|西有使用的場(chǎng)景，那自然就會(huì)有它的價(jià)值，那么用的人也會(huì)越來越多。

使用場(chǎng)景

其實(shí)CSS變量有一個(gè)特別好用的場(chǎng)景，那就是結(jié)合List元素集合使用。如果不明白這是什么，請(qǐng)繼續(xù)往下看。

以下所有演示代碼基于vue文件，但HTML、CSS和JS分開書寫，為了簡(jiǎn)化CSS的書寫而使用Sass進(jìn)行預(yù)處理，方便代碼演示

條形加載條

一個(gè)條形加載條通常由幾條線條組成，并且每條線條對(duì)應(yīng)一個(gè)存在不同時(shí)延的相同動(dòng)畫，通過時(shí)間差運(yùn)行相同的動(dòng)畫，從而產(chǎn)生加載效果。估計(jì)大部分的同學(xué)可能會(huì)把CSS代碼寫成以下這樣。

<ul class="strip-loading flex-ct-x">     <li v-for="v in 6" :key="v"></li> </ul>

.loading {     width: 200px;     height: 200px;     li {         border-radius: 3px;         width: 6px;         height: 30px;         background-color: #f66;         animation: beat 1s ease-in-out infinite;         & + li {             margin-left: 5px;         }         &:nth-child(2) {             animation-delay: 200ms;         }         &:nth-child(3) {             animation-delay: 400ms;         }         &:nth-child(4) {             animation-delay: 600ms;         }         &:nth-child(5) {             animation-delay: 800ms;         }         &:nth-child(6) {             animation-delay: 1s;         }     } }

分析代碼發(fā)現(xiàn)，每個(gè)<li>只是存在animation-delay不同，而其余代碼則完全相同，換成其他類似的List元素集合場(chǎng)景，那豈不是有10個(gè)<li>就寫10個(gè):nth-child。

顯然這種方法不靈活也不容易封裝成組件，如果能像JS那樣封裝成一個(gè)函數(shù)，并根據(jù)參數(shù)輸出不同的樣式效果，那就更棒了。說到這里，很明顯就是為了鋪墊CSS變量的開發(fā)技巧了。

對(duì)于HTML部分的修改，讓每個(gè)<li>擁有一個(gè)自己作用域下的CSS變量。對(duì)于CSS部分的修改，就需要分析哪些屬性是隨著index遞增而發(fā)生規(guī)律變化的，對(duì)規(guī)律變化的部分使用CSS變量表達(dá)式代替即可。

<ul class="strip-loading flex-ct-x">     <li v-for="v in 6" :key="v" :style="`--line-index: ${v}`"></li> </ul>

.strip-loading {     width: 200px;     height: 200px;     li {         --time: calc((var(--line-index) - 1) * 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;         }     } }

代碼中的變量--line-index和--time使每個(gè)<li>擁有一個(gè)屬于自己的作用域。例如第2個(gè)<li>，--line-index的值為2，--time的計(jì)算值為200ms，換成第3個(gè)<li>后這兩個(gè)值又會(huì)不同了。

這就是CSS變量的作用范圍所致(在當(dāng)前元素塊作用域及其子元素塊作用域下有效)，因此在.strip-loading的塊作用域下調(diào)用--line-index是無效的。

/* flex屬性無效 */ .loading {     display: flex;     align-items: center;     flex: var(--line-index); }

通過妙用CSS變量，也把CSS代碼從29行縮減到15行，對(duì)于那些含有List元素集合越多的場(chǎng)景，效果就更明顯。而且這樣寫也更加美觀更加容易維護(hù)，某天說加載效果的時(shí)間差不明顯，直接將calc((var(--line-index) - 1) * 200ms)里的200ms調(diào)整成400ms即可。就無需對(duì)每個(gè):nth-child(n)進(jìn)行修改了。

心形加載條

前段時(shí)間刷掘金看到陳大魚頭兄的心形加載條，覺得挺漂亮的，很帶感覺。

通過動(dòng)圖分析，發(fā)現(xiàn)每條線條的背景色和動(dòng)畫時(shí)延不一致，另外動(dòng)畫運(yùn)行時(shí)的高度也不一致。細(xì)心的你可能還會(huì)發(fā)現(xiàn)，第1條和第9條的高度一致，第2條和第8條的高度一致，依次類推，得到高度變換相同類的公式：對(duì)稱index = 總數(shù) + 1 - index。

背景色使用了濾鏡的色相旋轉(zhuǎn)hue-rotate函數(shù)，目的是為了使顏色過渡得更加自然；動(dòng)畫時(shí)延的設(shè)置和上面條形加載條的設(shè)置一致。下面就用CSS變量根據(jù)看到的動(dòng)圖實(shí)現(xiàn)一番。

<div class="heart-loading flex-ct-x">     <ul style="--line-count: 9;">         <li v-for="v in 9" :key="v" :class="`line-${v}`" :style="`--line-index: ${v}`"></li>     </ul> </div>

.heart-loading {     width: 200px;     height: 200px;     ul {         display: flex;         justify-content: space-between;         width: 150px;         height: 10px;     }     li {         --Θ: calc(var(--line-index) / var(--line-count) * .5turn);         --time: calc((var(--line-index) - 1) * 40ms);         border-radius: 5px;         width: 10px;         height: 10px;         background-color: #3c9;         filter: hue-rotate(var(--Θ));         animation-duration: 1s;         animation-delay: var(--time);         animation-iteration-count: infinite;     }     .line-1,     .line-9 {         animation-name: line-move-1;     }     .line-2,     .line-8 {         animation-name: line-move-2;     }     .line-3,     .line-7 {         animation-name: line-move-3;     }     .line-4,     .line-6 {         animation-name: line-move-4;     }     .line-5 {         animation-name: line-move-5;     } }

一波操作后就有了下面的效果。和陳大魚頭兄的心形加載條對(duì)比一下，顏色、波動(dòng)曲線和跳動(dòng)頻率有點(diǎn)不一樣，在暖色調(diào)的蔓延和腎上腺素的飆升下，這是一種心動(dòng)的感覺。想起自己曾經(jīng)寫的一首詩：我見猶憐，愛不釋手，雅俗共賞，君子好逑。

標(biāo)簽導(dǎo)航欄

上面通過兩個(gè)加載條演示了CSS變量在CSS中的運(yùn)用以及一些妙用技巧，現(xiàn)在通過標(biāo)簽導(dǎo)航欄演示CSS變量在JS中的運(yùn)用。

JS中主要有3個(gè)操作CSS變量的API，看上去簡(jiǎn)單易記，分別如下：

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

先上效果圖，效果中主要是使用CSS變量標(biāo)記每個(gè)Tab的背景色和切換Tab的顯示狀態(tài)。

<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;     flex-direction: column-reverse;     border-radius: 10px;     width: 300px;     height: 400px;     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: #66f;                 font-weight: bold;                 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;         }     } }

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

在<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，通過calc()計(jì)算--tab-index與--tab-move的關(guān)系，從而操控transform: translate3d()來移動(dòng)<ul>。

另外在<li>上定義--bg-color表示Tab的背景色，也是一種比較簡(jiǎn)潔的模板賦值方式，總比寫<li :style="backgroundColor: ${color}">要好看。如果多個(gè)CSS屬性依賴一個(gè)變量賦值，那么使用CSS變量賦值到style上就更方便了，那些CSS屬性可在CSS文件里進(jìn)行計(jì)算與賦值，這樣可幫助JS分擔(dān)一些屬性計(jì)算工作。

當(dāng)然，這個(gè)標(biāo)簽導(dǎo)航欄也可通過純CSS實(shí)現(xiàn)，有興趣的同學(xué)可看看筆者之前一篇文章里的純CSS標(biāo)簽導(dǎo)航欄。

懸浮跟蹤按鈕

通過幾個(gè)栗子實(shí)踐了CSS變量在CSS和JS上的運(yùn)用，相信大家已經(jīng)掌握了其用法和技巧。之前在某個(gè)網(wǎng)站看過一個(gè)比較酷炫的鼠標(biāo)懸浮特效，好像也是使用CSS變量實(shí)現(xiàn)的。筆者憑著記憶也使用CSS變量實(shí)現(xiàn)一番。

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

<a class="track-btn pr tac" @mousemove="move">     <span>妙用CSS變量，讓你的CSS變得更心動(dòng)</span> </a>

.track-btn {     display: block;     overflow: hidden;     border-radius: 100px;     width: 400px;     height: 50px;     background-color: #66f;     line-height: 50px;     cursor: pointer;     font-weight: bold;     font-size: 18px;     color: #fff;     span {         position: relative;     }     &::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: all 200ms ease;     }     &:hover::before {         --size: 400px;     } }

export default {     name: "track-btn",     methods: {         move(e) {             const x = e.pageX - e.target.offsetLeft;             const y = e.pageY - e.target.offsetTop;             e.target.style.setProperty("--x", `${x}px`);             e.target.style.setProperty("--y", `${y}px`);         }     } };

其實(shí)可結(jié)合鼠標(biāo)事件來完成