言

CSS變量又叫CSS自定義屬性，為什么會突然提起這個很少人用到的東西呢？因為最近在重構個人官網，不知道為什么突然喜歡用上CSS變量，可能其自身隱藏的魅力，讓筆者對它刮目相看。

談到為什么會在CSS中使用變量，下面舉個例子，估計大家一看就會明白。

/* 不使用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);
}
復制代碼

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

此時CSS變量就派上用場了，提前跟設計小姐姐規范好各種需要變換的顏色并通過CSS變量進行定義，通過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));
});
復制代碼

在此總結下CSS使用變量的好處：

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

可能有些同學會問，Sass和Less早就實現了變量這個特性，何必再多此一舉呢。可是細想一下，CSS變量對比Sass和Less的變量，又有它的過人之處。

• 瀏覽器原生特性，無需經過任何轉譯就可直接運行
• DOM對象一員，極大便利了CSS與JS之間的聯系

認識

本來打算用一半篇幅講述CSS變量的規范和用法，但是網上一搜一大把就感覺沒必要了，貼上阮一峰老師寫的教程《CSS變量教程》。同時筆者也對CSS變量的細節地方進行一個整理，方便大家記憶。

• 聲明：--變量名
• 讀取：var(--變量名, 默認值)
• 類型 普通：只能用作屬性值不能用作屬性名 字符：與字符串拼接 "Hello, "var(--name) 數值：使用calc()與數值單位連用 var(--width) * 10px
• 作用域 范圍：在當前元素塊作用域及其子元素塊作用域下有效 優先級別：內聯樣式 > ID選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器

接下來使用幾個特別的場景展示CSS變量的魅力。還是那句話，一樣東西有使用的場景，那自然就會有它的價值，那么用的人也會越來越多。

使用場景

其實CSS變量有一個特別好用的場景，那就是結合List元素集合使用。如果不明白這是什么，請繼續往下看。

以下所有演示代碼基于Vue文件，但HTML、CSS和JS分開書寫，為了簡化CSS的書寫而使用Sass進行預處理，方便代碼演示

條形加載條

一個條形加載條通常由幾條線條組成，并且每條線條對應一個存在不同時延的相同動畫，通過時間差運行相同的動畫，從而產生加載效果。估計大部分的同學可能會把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;
        }
    }
}
復制代碼

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

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

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

<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使每個<li>擁有一個屬于自己的作用域。例如第2個<li>，--line-index的值為2，--time的計算值為200ms，換成第3個<li>后這兩個值又會不同了。

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

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

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

心形加載條

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

通過動圖分析，發現每條線條的背景色和動畫時延不一致，另外動畫運行時的高度也不一致。細心的你可能還會發現，第1條和第9條的高度一致，第2條和第8條的高度一致，依次類推，得到高度變換相同類的公式：對稱index = 總數 + 1 - index。

背景色使用了濾鏡的色相旋轉hue-rotate函數，目的是為了使顏色過渡得更加自然；動畫時延的設置和上面條形加載條的設置一致。下面就用CSS變量根據看到的動圖實現一番。

<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;
    }
}
復制代碼

源碼鏈接可在文章結尾處獲取

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

標簽導航欄

上面通過兩個加載條演示了CSS變量在CSS中的運用以及一些妙用技巧，現在通過標簽導航欄演示CSS變量在JS中的運用。

JS中主要有3個操作CSS變量的API，看上去簡單易記，分別如下：

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

先上效果圖，效果中主要是使用CSS變量標記每個Tab的背景色和切換Tab的顯示狀態。

<div class="tab-navbar">
    <nav>
        <a v-for="(v, i) in list" :key="v" :class="{ active: index === i }" @click="select(i)">標題{{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}`">內容{{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當前的索引，當點擊按鈕時重置--tab-index的值，就可實現不操作DOM來移動<ul>的位置顯示指定的Tab。不操作DOM而可移動<ul>是因為定義了--tab-move，通過calc()計算--tab-index與--tab-move的關系，從而操控transform: translate3d()來移動<ul>。

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

當然，這個標簽導航欄也可通過純CSS實現，有興趣的同學可看看筆者之前一篇文章里的純CSS標簽導航欄。

懸浮跟蹤按鈕

通過幾個栗子實踐了CSS變量在CSS和JS上的運用，相信大家已經掌握了其用法和技巧。之前在某個網站看過一個比較酷炫的鼠標懸浮特效，好像也是使用CSS變量實現的。筆者憑著記憶也使用CSS變量實現一番。

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

<a class="track-btn pr tac" @mousemove="move">
    <span>妙用CSS變量，讓你的CSS變得更心動</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`);
        }
    }
};
復制代碼

源碼鏈接可在文章結尾處獲取

其實可結合鼠標事件來完成更多的酷炫效果，例如動畫關聯、事件響應等操作。沒有做不到，只有想不到，盡情發揮你的想象力啦。

之前在CodePen上還看到一個挺不錯的栗子，一個懸浮視差按鈕，具體代碼涉及到一些3D變換的知識。看完源碼后，按照其思路自己也實現一番，順便對代碼稍加改良并封裝成Vue組件，存放到本課件示例代碼中。感覺錄制的GIF有點別扭，顯示效果不太好，有興趣的同學可下載本課件示例代碼，自己運行看看效果。

兼容

對于現代瀏覽器來說，CSS變量的兼容性其實還是蠻好的，所以大家可放心使用。畢竟現在都是各大瀏覽器廠商快速迭代的時刻，產品對于用戶體驗來說是占了很大比重，因此在條件允許的情況下還是大膽嘗新，不要被一些過去的所謂的規范所約束著。

試問現在還有多少人愿意去維護IE6~IE9的兼容性，如果一個產品的用戶體驗受限于遠古瀏覽器的壓制(可能政務Web應用和金融Web應用除外吧)，相信這個產品也不會走得很遠。

我們在完成一個產品的過程中，不僅僅是為了完成工作任務，如果在保證進度的同時能花點心思點綴一下，可能會有意外的收獲。用心寫好每一段代碼，才是享受寫代碼的真諦。

總結

本文通過循序漸進的方式探討了CSS變量的運用和技巧，對于一個這么好用的特性，當然是不能放過啦。其實多多思考，就能把CSS變量用在很多場景上。筆者把本文提到的示例統一組成一個Demo，也方便有興趣的同學通過課件示例代碼進行學習，思考一些可能在閱讀本文時沒有注意到的細節。

• Demo示例：條形加載條、心形加載條、標簽導航欄、懸浮跟蹤按鈕、懸浮視差按鈕
• Demo地址：關注IQ前端，掃描文章底部二維碼，后臺回復變量，獲取整套課件示例代碼
• Demo運行：里面的readme.html有詳細說明，記得看喔

寫到最后，送給大家一個大大的彩蛋，一個暖心彩虹色調搭配的愛心點贊按鈕。如果你覺得本文寫得棒棒噠，請給筆者一個贊喔，就像下面那樣。當然，彩蛋源碼也在課件示例代碼里啦。想了解更多的CSS開發技巧，可移步到筆者19年寫的一篇9.2萬閱讀量的爆款文章《靈活運用CSS開發技巧(66個騷操作案例)》，保證滿足你的眼球。

結語

??關注+點贊+收藏+評論+轉發??，原創不易，鼓勵筆者創作更好的文章

趣是最好的老師，HelloGitHub 就是幫你找到興趣！

簡介

分享 GitHub 上有趣、入門級的開源項目。

這是一個面向編程新手、熱愛編程、對開源社區感興趣 人群的月刊，月刊的內容包括：各種編程語言的項目、讓生活變得更美好的工具、書籍、學習筆記、教程等，這些開源項目大多都是非常容易上手，而且非常 Cool。主要是希望大家能動手用起來，加入到開源社區中。

在瀏覽、參與這些項目的過程中，你將學習到更多編程知識、提高編程技巧、找到編程的樂趣。

最后 HelloGitHub 這個項目就誕生了

以下為本期內容｜每個月 28 號發刊

C 項目

1、ngx_waf：一個 Nginx 防火墻模塊。我差點就錯過了的寶藏項目，它使用簡單不需要復雜的配置，支持的功能直戳我的痛點。你看：

C++ 項目

2、fast-cpp-csv-parser：讀取 CSV 文件的 C++ 庫（僅頭文件）。示例代碼：

# include "csv.h"

int main(){
  io::CSVReader<3> in("ram.csv");
  in.read_header(io::ignore_extra_column, "vendor", "size", "speed");
  std::string vendor; int size; double speed;
  while(in.read_row(vendor, size, speed)){
    // 對 ram.csv 文件中的數據，做你想做的事情吧！
  }
}

3、UNO：使用 C++ 編寫的命令行 UNO 紙牌游戲。操作方便支持人機或聯機對戰，游戲基于 Asio 網絡庫和現代 C++ 開發，也有對 C++17 的嘗試。分別實現了服務端、客戶端，代碼簡單對 C++ 新手友好，UNO 的愛好者快來玩一玩吧！

4、godot：一款功能豐富的開源游戲引擎。最初它只是一款 2D 引擎，近期拓展了 3D 部分的能力。相較于 UE4 或者 Unity 這樣的成熟商業引擎來說，Godot 還很年輕不夠成熟，尤其 3D 方面的能力。但它擁有簡易的開發方式，上手簡單。而且社區活躍、文檔覆蓋全面、有較為豐富的示例代碼，對于剛入門的游戲開發者友好。同時開源引擎底層代碼完全開源，開發者可以閱讀和貢獻代碼，而不是只停留在游戲邏輯開發層面。總而言之 Godot 是一個極有潛力的游戲引擎，推薦給想學習游戲開發的同學

CSS 項目

5、water.css：一個專門為簡單頁面和示例網頁準備的 CSS 框架

Go 項目

6、fyne：一款 Go 語言跨平臺 UI 庫。想用 Go 寫圖形界面應用的小伙伴，快速上手：

安裝
$ go get fyne.io/fyne
運行一個 demo
$ go get fyne.io/fyne/cmd/fyne_demo/
$ fyne_demo

7、golearn：Go 寫的機器學習框架。來，跑個模型試試吧：

cd $GOPATH/src/github.com/sjwhitworth/golearn/examples/knnclassifier
go run knnclassifier_iris.go

Java 項目

8、keepass2android：一個開源的 Android 密碼管理器。下載地址，功能：

9、PrettyZoo：一款 Java 寫的高顏值 ZooKeeper 客戶端桌面應用。該項目使用了 JDK11 以及 JavaFX 編寫的 GUI 客戶端，代碼量適中適合想學習 JavaFX 編寫應用的朋友。需要連接 ZK 服務端查看數據的話，手邊有這么個工具還是挺方便的。實用和顏值集一身的項目

10、vueblog：一款輕量級 Java 博客項目。基于 SpringBoot+Vue 實現并附有詳細開發文檔和講解視頻，讓剛學會 Java 的同學也能搞定。每個體面的技術人員可能都有一個自己說了算的博客吧

JavaScript 項目

11、x-spreadsheet：基于 JavaScript 實現的輕量級 Web 電子表格庫。它功能齊全，包含表格的基本操作和函數等，還有詳細的中文文檔，在線嘗試

12、h5-Dooring：一款功能齊全的 H5 頁面可視化配置平臺。讓你通過可視化的方式制作出 H5 頁面，技術棧以 React 為主，后臺采用 Node.js 實現。雖然網上有很多這種工具，但本項目免費開源、功能齊全值得一試

13、Ant-Forest：基于 Auto.js 的螞蟻森林能量自動收獲腳本。它是個“綠色環保”的項目，我能從中感受到滿滿的愛和想把它做好的決心！來看看作者開發 Ant-Forest 時解決了哪些難題：

1. 能量球識別無法使用控件信息（使用基于霍夫變換的圖像識別）
2. 腳本執行邏輯易被打斷（使用事件監聽及擴展模塊增強魯棒性）
3. 每次只能運行一次（完善的復查及定時循環功能）
4. 不同設備分辨率及屏幕比例不同（使用等比縮放/定寬縮放等進行適配）

14、tui.image-editor：功能齊全的圖片編輯器。支持圖片剪裁、旋轉、涂鴉等功能，實現了 Vue 和 React 封裝的組件，便于整合進你的項目

15、windows95：基于 Electron 實現的 Windows 95 操作系統。它實現了該操作系統下的所有東西，對！所有！想體驗下 Windows 95 版的掃雷嗎？下載安裝即可

Objective-C 項目

16、LuLu：免費開源的 macOS 防火墻軟件

PHP 項目

17、humhub：用 PHP 寫的開源社交平臺。看過《社交網絡》的小伙伴，都知道大名鼎鼎的 Facebook 最早就是扎克伯格用 PHP 語言寫出來的，humhub 能夠讓不會編程的小伙伴也可以用創建出一個社交平臺啦。跟著提示一步步操作，不到 1 分鐘我的社交平臺就建好了

18、phpbrew：一個編譯、安裝、管理多版本 PHP 的工具。有了它就可以方便地在不同 PHP 版本之間自由切換啦，特性：

Python 項目

19、python-patterns：Python 設計模式和使用場景的集合

20、pgcli：支持語法高亮和自動補全的 Postgres 數據庫客戶端命令行工具。它安裝簡單上手快速，如果你用過 Postgres 數據庫自帶的命令行工具，就一定能感受到 pgcli 的迷人之處

21、15-minute-apps：基于 PyQt 框架寫的小型桌面應用程序的集合。想用 Python 寫桌面應用的小伙伴，這個項目應該可以幫到你。比如寫個掃雷游戲：

Swift 項目

22、Pine：一個免費、輕量、簡潔的 macOS Markdown 編輯器。功能：

23、Publish：專為 Swift 開發人員準備的靜態網站生成器。讓你實現整個網站都是用 Swift 構建的工具，支持多種主題、插件以及更多強大的自定義選項。示例網站，安裝和快速開始：

$ git clone https://github.com/JohnSundell/Publish.git
$ cd Publish
$ make
$ mkdir MyWebsite
$ cd MyWebsite
$ publish new

其它

24、open-source-rover：NASA 面向科技愛好者開源的火星漫游車設計方案和代碼。通過該項目你可以使用便宜的樹莓派做出自己的火星漫游車，所需的零件很容易就可以買到，遙控部分是使用現成的 Xbox 手柄或者手機，減少花銷。喜歡動手和硬件的小伙伴們，這個東西夠酷嗎？

25、bat：替代 cat 的命令行工具。你還在命令行用 cat 查看文件嗎？那你就 out 啦！今天推薦的 bat 它不僅支持語法高亮，還能展示 Git 的改動。macOS 下安裝命令：brew install bat 相信你用過 bat 后就不會再想用回 cat 了

26、Web-Dev-For-Beginners：微軟開源的 Web 開發教程。該教程共有 24 節課，但目前只有英文版

27、neofetch：展示操作系統信息的命令行工具，支持將近 150 種操作系統

28、jpeg_tutorial：教你編寫 JPEG 解碼器的教程，示例為 Rust 代碼

29、sql-style-guide：一份 SQL 語句編寫風格建議。比如：

-- Good
select *
from users
where email = 'example@domain.com'

-- Bad
select *
from users
where email = "example@domain.com"

開源書籍

30、pure-bash-bible：該書有好多復制就能用的 bash 函數，我愿稱其為 bash 的“奇技淫巧”。比如把字母轉為大寫的函數：

upper() {
    # Usage: upper "string"
    printf '%s\n' "${1^^}"
}

$ upper "hello"
HELLO

機器學習

31、pulse：根據包含馬賽克的人臉圖像，生成一張相似容貌的結果。注意不是復原哦，僅可用于人臉

32、Surface-Defect-Detection：該項目整理了目前大量靠譜的表面缺陷檢測數據集，還有最新的頂會論文以及作者的解讀筆記。從事視覺方向的小伙伴，心動了嗎？

最后

迎留言告訴我本期你最喜歡那個項目，如果覺得本文還不錯的話，就點贊、轉發一波吧～