/

CSS 變數 (自訂屬性)

CSS 變數 (自訂屬性)

探索 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) 前面，然後是冒號和值。像這樣：

1
2
3
:root {
 --primary-color: yellow;
}

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

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

1
2
3
p {
 color: var(--primary-color)
}

變數的值可以是任何有效的 CSS 值，例如：

1
2
3
4
5
:root {
 --default-padding: 30px 30px 20px 20px;
 --default-color: red;
 --default-background: #fff;
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
: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：

1
2
3
:root {
 --primary-color: yellow;
}

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

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

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

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

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

1
2
3
.container {
 --secondary-color: yellow;
}

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

變數可以被重新賦值：

1
2
3
4
5
6
7
:root {
 --primary-color: yellow;
}

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

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

您還可以使用 內联样式（inline styles） 在 HTML 內部分配或覆寫變數：

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

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

使用 JavaScript 互動 CSS 變數值

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

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

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

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

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

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

1
2
3
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 和舊版其他瀏覽器，現在就可以使用它們。

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

CSS 變數區分大小寫

這個變數：

1
--width: 100px;

和這個變數：

1
--Width: 100px;

是不同的。

CSS 變數中的數學計算

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

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

使用 CSS 變數進行媒體查詢

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

1
2
3
4
5
6
7
8
9
10
11
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);
}