原文來自 Advanced CSS Theming with Custom Properties and Javascript - (https://www.sitepoint.com/css-theming-custom-properties-javascript/)

在關於CSS主題的本教程中，我們將使用CSS自定義屬性（也稱為CSS變量）來為簡單的HTML頁面實現動態主題。 我們將創建暗色和亮色的示例主題，然後編寫JavaScript在用戶點擊按鈕時在這兩者之間切換。

就像在典型的編程語言中一樣，變量用於存儲值。 在CSS中，它們通常用於存儲顏色、字體名稱、字體大小、長度單位等。它們可以在樣式表中的多個位置重複使用。 大多數開發者都稱呼為“CSS變量”，但官方名稱是“自定義屬性”。

CSS自定義屬性可以修改在整個樣式表中引用的變量。 以前，只有使用Sass等CSS預處理器才能實現這一點。

理解 :root 和 var()

在創建動態主題示例之前，讓我們先來了解一下自定義屬性的基礎知識。

自定義屬性是一個名稱以兩個連字符（ - ）開頭的屬性，如--foo。 它們定義了可以使用var（）來引用的變量。 讓我們看看下面的例子：

在 :root 選擇器中定義自定義屬性意味著它們可以在全局文檔空間中應用於所有元素。 :root 是一個CSS偽類，它匹配文檔的根元素 - 元素。 它類似於html選擇器，但具有更高的特異性。

你可以在文檔中的任何位置訪問 :root 自定義屬性的值：

你也可以預設一個備用值，例如

如果自定義屬性沒有定義的話，備用值將被使用。

在除了:root或html選擇器之外的CSS選擇器內定義定義屬性可以使變量用於匹配元素及其子元素。

CSS自定義屬性 VS 預處理器變量

諸如Sass之類的CSS預處理器通常用於輔助前端Web開發。 預處理器的有用功能中就包括了變量。 但是Sass變量和CSS自定義屬性之間有什麼區別呢？

• CSS自定義屬性在現代瀏覽器中能原生地被解析。 預處理器變量則需要編譯進標準CSS文件裡，並且所有變量都將轉換為值。
• 自定義屬性能被JavaScript訪問和修改。 預處理器變量編譯一次之後，只有它們的最終值在客戶端上使用。

寫一個簡單的HTML頁面

讓我們開始給項目新建一個文件夾：

接著，在文件夾中新建一個index.html:

然後寫入以下代碼：

我們添加了一個使用

閱讀更多 鍋鴨梨說 的文章

關鍵字: 編程語言 技術 JavaScript