探索 CSS 自訂屬性,也被稱為 CSS 變數,這是現代瀏覽器的強大新功能,幫助您編寫更好的 CSS

介紹

過去幾年,CSS 預處理器非常成功。在新專案中開始使用 Less 或 SASS 是非常常見的事情。到現在仍然是非常流行的技術。

這些技術的主要優勢在我看來有以下幾點:

  • 它們允許嵌套選擇器
  • 它們提供了方便的導入功能
  • 它們提供變數

現代 CSS 有一個強大的新功能,稱為 CSS 自訂屬性,通常也被稱為 CSS 變數

CSS 不像 JavaScript、Python、PHP、Ruby 或 Go 這樣的程式語言,變數對於執行有用的事情至關重要。CSS 在它可以做的事情上非常有限,主要是一種聲明語法,用於告訴瀏覽器如何顯示 HTML 頁面。

但是,變數就是變數:一個指向值的名稱,CSS 中的變數有助於減少 CSS 中的重複和不一致,通過集中定義值。

它還引入了一個 CSS 預處理器永遠無法擁有的獨特功能:您可以使用 JavaScript 以編程方式訪問和更改 CSS 變數的值

使用變數的基礎知識

CSS 變數使用特殊語法定義,將兩個連字符 (--) 添加到變數名稱 (--variable-name) 前面,然後是冒號和值。像這樣:

:root {
 --primary-color: yellow;
}

(有關 :root 的更多內容稍後介紹)

您可以使用 var() 來訪問變數的值:

p {
 color: var(--primary-color)
}

變數的值可以是任何有效的 CSS 值,例如:

:root {
 --default-padding: 30px 30px 20px 20px;
 --default-color: red;
 --default-background: #fff;
}

在任何元素內可以定義變數

CSS 變數可以在任何元素內定義。以下是一些示例:

:root {
 --default-color: red;
}

body {
 --default-color: red;
}

main {
 --default-color: red;
}

p {
 --default-color: red;
}

span {
 --default-color: red;
}

a:hover {
 --default-color: red;
}

在這些不同的示例中變化的是作用範圍

變數的作用範圍

將變數添加到選擇器中,使它們對所有子元素可用。

在上面的示例中,您看到了在定義 CSS 變數時使用了 :root

:root {
 --primary-color: yellow;
}

:root 是一個 CSS 虛擬類,它標識樹的根元素。

在 HTML 文檔的上下文中,使用 :root 選擇器指向 html 元素,只是 :root 具有更高的優先級

在 SVG 圖像的上下文中,:root 指的是 svg 標籤。

:root 添加 CSS 自訂屬性使其在頁面上的所有元素中都可用。

如果您在 .container 選擇器內添加變數,它只會對 .container 的子元素可用:

.container {
 --secondary-color: yellow;
}

在此元素外部使用它將無效。

變數可以被重新賦值

:root {
 --primary-color: yellow;
}

.container {
 --primary-color: blue;
}

.container 外部,--primary-color 將是 yellow,但在其中將是 blue

您還可以使用 內联样式(inline styles) 在 HTML 內部分配或覆寫變數:

<main style="--primary-color: orange;">
 <!-- ... -->
</main>

CSS 變數遵循常規的 CSS 载入规则,優先順序根據 優先級 設置

使用 JavaScript 互動 CSS 變數值

CSS 變數最棒的功能是能夠使用 JavaScript 訪問和編輯它們的值。

以下是使用純 JavaScript 設置變數值的方式:

const element = document.getElementById('my-element')
element.style.setProperty('--variable-name', 'a-value')

如果變數定義在 :root 上,則可以使用下面的代碼來獲取變數值:

const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--variable-name')).trim()

或者,在變數使用不同作用範圍時,可以獲取應用於特定元素的樣式:

const element = document.getElementById('my-element')
const styles = getComputedStyle(element)
const value = String(styles.getPropertyValue('--variable-name')).trim()

處理無效值

如果將變數分配給不接受變數值的屬性,則被視為無效。

例如,您可能將像素值傳遞給 position 屬性,或將 rem 值傳遞給顏色屬性。

在這種情況下,該行被視為無效並被忽略。

瀏覽器支援

CSS 變數的瀏覽器支援是非常好的根據 Can I Use 的說法。

CSS 變數已經趨於穩定,如果您不需要支援 Internet Explorer 和舊版其他瀏覽器,現在就可以使用它們。

如果您需要支援舊版瀏覽器,可以使用像 PostCSSMyth 這樣的庫,但您將失去通過 JavaScript 或瀏覽器開發者工具與變數互動的能力,因為它們會被轉譯為普通的無變數 CSS(因此,您失去了 CSS 變數的大部分功能)。

CSS 變數區分大小寫

這個變數:

--width: 100px;

和這個變數:

--Width: 100px;

是不同的。

CSS 變數中的數學計算

要在 CSS 變數中進行數學計算,您需要使用 calc(),例如:

:root {
 --default-left-padding: calc(10px * 2);
}

使用 CSS 變數進行媒體查詢

這裡沒有什麼特別之處。CSS 變數通常適用於媒體查詢:

body {
 --width: 500px;
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
 --width: 800px;
}

.container {
 width: var(--width);
}

為 var() 設定備用值

var() 接受第二個參數,該參數是在變數值未設置時的默認備用值:

.container {
 margin: var(--default-margin, 30px);
}