CSS 變數：賦能您的樣式表

你好，有抱負的網頁開發者們！今天，我們將深入探索 CSS 變數的精彩世界。作為你們友善的鄰居電腦老師，我非常高興能夠帶領你們開展這次旅程。相信我，在這個教學結束時，你們將會像專業人士一樣熟練地使用 CSS 變數！

什麼是 CSS 變數？

CSS 變數，也被稱為 CSS 自定屬性，是允許您存儲特定值以在您的樣式表中重用的實體。可以把這些變數看作是存放您最喜歡的顏色、尺寸或任何您經常使用的 CSS 值的容器。

讓我們從一個簡單的例子開始：

:root {
--main-color: #3498db;
}

.button {
background-color: var(--main-color);
}

在這段代碼中，我們定義了一個變數 --main-color 並用它來設置按鈕的背景顏色。是不是很棒？

CSS 變數 - 標準方法

聲明 CSS 變數的標準方法是使用雙短線（--）接著變數名稱。以下是如何操作的：

.container {
--padding: 20px;
--font-size: 16px;
}

.box {
padding: var(--padding);
font-size: var(--font-size);
}

在這個例子中，我們在 .container 類中定義了兩個變數，--padding 和 --font-size。然後我們在 .box 類中使用這些變數。這種方法可以讓更新變得非常容易 - 只要更改一次變數值，到處就會更新！

CSS 變數 - :root 伪類

:root 伪類就像是 CSS 的超級英雄 - 它代表 DOM 树中的最高級別的父元素。當我們在這裡聲明變數時，它們會成為全局可訪問的。讓我們看看它是如何工作的：

:root {
--primary-color: #e74c3c;
--secondary-color: #2ecc71;
}

.header {
background-color: var(--primary-color);
}

.footer {
color: var(--secondary-color);
}

通過在 :root 中定義我們的顏色變數，我們可以在樣式表的任何地方使用它們。就像手邊有一個顏色調色板一樣！

CSS 變數 - 自定屬性的繼承

CSS 變數最酷的功能之一就是它們能從父元素繼承值。這就像樣式的家族樹一樣！看看這個：

.parent {
--font-size: 18px;
}

.child {
font-size: var(--font-size);
}

.grandchild {
/* 這裡也會是 18px */
font-size: var(--font-size);
}

在這個例子中，.child 和 .grandchild 都從 .parent 繼承了 --font-size 的值。這是保持設計一致性的好方法。

CSS 變數 - 自定屬性的備用值

有時候，事情可能不如計劃那樣進行。但別擔心！CSS 變數有備用值為您提供支持。以下是如何操作的：

.button {
/* 如果 --button-color 沒有定義，它將使用藍色 */
background-color: var(--button-color, blue);
}

這就像有一個備用計劃。如果 --button-color 沒有定義，您的按鈕將是藍色。有個安全網總是好的！

CSS 變數 - 處理無效的自定屬性

當 CSS 變數無效時會發生什麼？讓我們來看看：

:root {
--text-color: 123;
}

.text {
/* 這不會按預期工作 */
color: var(--text-color);

/* 這會 fallback 到黑色 */
color: var(--text-color, black);
}

在第一種情況下，瀏覽器會忽略無效的值並使用 color 的繼承或初始值。在第二種情況下，它會使用備用值 black。始終驗證您的變數以避免意外的結果！

CSS 變數 - 在 JavaScript 中的值

當我們將 CSS 變數與 JavaScript 相結合時，真正的魔術就發生了。這就像給您的樣式賦予超能力！以下是一個示例：

// 獲取根元素
const root = document.documentElement;

// 設置一個變數
root.style.setProperty('--main-color', '#9b59b6');

// 獲取一個變數
const mainColor = getComputedStyle(root).getPropertyValue('--main-color');

console.log(mainColor); // 輸出：#9b59b6

這讓您可以根據用戶交互、時間或任何您可以想到的其他因素動態地更改您的樣式！

結論

CSS 變數是網頁開發中的一個遊戲規則改變者。它們為您的樣式表帶來了靈活性、可維護性和動態性。記住，熟能生巧，所以不要害怕在您的項目中嘗試這些概念。

這裡是一個我們已經介紹過的方法的快速參考表：

方法	描述
聲明	--variable-name: value;
使用	property: var(--variable-name);
全局範圍	使用 :root 伪類
繼承	變數從父元素繼承
备用值	var(--variable-name, fallback-value)
JavaScript 設置	element.style.setProperty('--var-name', value)
JavaScript 獲取	getComputedStyle(element).getPropertyValue('--var-name')

快樂編程，未來的 CSS 大師們！記住，每個專家都曾是初學者。持續練習，保持好奇心，最重要的是，享受您的代碼！

Credits: Image by storyset