CSS 變數運用

前言

CSS 也能像 Javascript 一樣運用變數，而變數在使用上也是和 JavaScript 一樣，先設定再套用，更方便管理相同的顏色和值，以及日後的修改。

使用方法

設定方法有 2 種，一種是直接設定使用，另一種是要先設定變數再套用

直接設定使用

var(--foo, red)
var(變數名稱, 值)

變數要在前頭加上 --

先設定變數後套用

變數設定又分全域變數必須要在 :root 內

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

和區域變數，這是指在設定變數的 HTML 標籤元素之內的標籤元素才可以使用變數。

.box {
  --main-color: red;
}

使用變數

.text {
  color: var(--main-bg-color);
}

用 Javascript 設定變數

// 取得 HTML 標籤元素的變數
element.style.getPropertyValue("--my-var");

// 取得全部樣式中變數名稱為 --my-var 的變數
getComputedStyle(element).getPropertyValue("--my-var");

// 設定新的變數和值
element.style.setProperty("--my-var", num );

Calc 計算