CSS 變數 (CSS Variables) 教學

CSS 變數，這是在IE死亡後，最需要惡補的一項技能，CSS變數能使頁面的變化更上一層，也能幫助CODE簡化很多，非常方便。 CSS 變數，也稱為 CSS 自定義屬性，讓你能在 CSS 中定義特定的值並在整個文件或網站中重複使用它們。這不僅提高了你的工作效率，還使得維護和更新 CSS 變得更加容易。以下是如何使用 CSS 變數的基本教學：

:root {
    --main-color: #62a9ff;
    --secondary-color: #f4f4f4;
    --font-size: 16px;
}

在這裡，”–main-color”、”–secondary-color” 和 “–font-size” 是自定義的變數名稱，而 “#62a9ff”、”#f4f4f4” 和 “16px” 是它們的對應值。

使用變數： 當你定義了 CSS 變數後，你可以使用 var() 函數在你的樣式表的任何地方引用它們。

.container {
    background-color: var(--main-color);
    font-size: var(--font-size);
}

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

在這個例子中，”.container” 類的背景顏色將設置為變數 “–main-color” 的值，字體大小將設置為 “–font-size”。同樣，”.text” 類的文本顏色將設置為 “–secondary-color”。

變數的回退值： 在使用 var() 函數時，你可以為變數指定一個回退值。如果該變數沒有被定義，則使用這個回退值。

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

在這個例子中，如果 “–main-color” 沒有被定義，背景顏色將回退到 “#f4f4f4″。

修改變數： 你也可以在特定的選擇器或媒體查詢中修改 CSS 變數的值。

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}

在這個媒體查詢中，當視口寬度小於600像素時，”–font-size” 的值將改為 “14px”。

通過使用 CSS 變數，你可以使你的樣式表更具有模組化，更容易維護。它們對於實現一致的主題樣式、適應不同的設備尺寸或用戶偏好設置都非常有用。記住，CSS 變數在老舊的瀏覽器中可能不受支持，所以請確保在你的目標受眾中進行適當的兼容性檢查。

作用域： 雖然 CSS 變數通常在 :root 中定義，從而在全局範圍內可用，但你也可以在更具體的選擇器中定義它們，以設置變數的局部作用域。

.element {
    --local-color: #ff0000;
}

在此示例中，--local-color 只在 .element 及其下面的子元素中可用。

JavaScript 互操作性： CSS 變數也可以在 JavaScript 中使用，這使得動態調整樣式變得非常容易。

// 設置變數
document.documentElement.style.setProperty('--main-color', '#00ff00');

// 獲取變數
let mainColor = getComputedStyle(document.documentElement).getPropertyValue('--main-color');
這段代碼演示了如何使用 JavaScript 更改和讀取 CSS 變數，從而在網頁運行時動態更新樣式。

計算與變數： CSS 變數可以非常有效地與 calc() 函數結合使用，這使你能夠執行基於變數的動態計算。

.box {
    width: calc(var(--base-size) * 3);
}

如果 --base-size 是 100px，.box 的寬度將自動計算為 300px。

變數與動畫： CSS 變數還可以用於 animation 和 transition 屬性，使得基於變數的動畫參數調整成為可能。

nimated-element {
    transition: background-color var(--transition-duration) ease-in-out;
}

在此，--transition-duration 變數控制著過渡動畫的時間長度。

透過這些進階技巧，CSS 變數不僅增加了 CSS 的模組化和動態能力，還允許開發者更有效地控制和調整網站的設計。不過，要獲得最佳效果，建議您熟悉 CSS 的基本知識，並在實際項目中進行實踐，以充分利用 CSS 變數所提供的功能。

作用在HTML上

CSS 變數主要是在 CSS 中定義和使用的，它們用於存儲可在 CSS 文件中重複使用的值。然而，它們確實在 HTML 文件中有實際應用，因為定義的 CSS 變數可以應用於 HTML 元素的樣式。

這裡有幾種方式 CSS 變數影響 HTML：

通過 CSS 選擇器： 當你在 CSS 文件中定義了變數後，這些變數可以通過 CSS 選擇器應用於 HTML 文件中的特定元素。

:root {
    --main-bg-color: coral;
}

div {
    background-color: var(--main-bg-color);
}

在這個例子中，所有的 div 元素將使用在 :root 中定義的 --main-bg-color 變數。

內聯樣式： 你也可以在 HTML 中的單個元素上使用內聯樣式定義 CSS 變數。

<div style="--main-bg-color: coral; background-color: var(--main-bg-color);">
    Hello, world!
</div>

這裡，--main-bg-color 變數是直接定義在元素的 style 屬性中的。

JavaScript 互操作： 通過 JavaScript，你可以動態地修改 CSS 變數的值，這會影響到應用了這些變數的 HTML 元素的樣式。

document.documentElement.style.setProperty('--main-bg-color', 'coral');

這行 JavaScript 代碼改變了 --main-bg-color 變數的值，這會影響到所有使用此變數的 HTML 元素。

因此，雖然 CSS 變數在 CSS 中定義和管理，但它們確實影響並應用於 HTML 元素，從而改變這些元素的樣式。