前言

CSS 變數（Variable）提供了一種設定 CSS 屬性數值作為變數的方式，透過保存在變數中的值，你可以很方便的管理 CSS 中如顏色、尺寸或間距等屬性，這些變數將可以提供給其他 CSS 屬性做重複使用。在

原生 CSS 變數

當 CSS 的變數被定義在 :root 根選擇器中，這些變數將可以在整個 DOM 元素中做使用。

:root {
  --primary-color: #f6bb00;
  --background-color: #ffffff;
}

當我們需要使用定義好的變數，可以使用 var() 來取值。

body {
  background-color: var(--background-color);
  color: var(--primary-color);
}

除了在 :root 根選擇器中，定義這些變數外，你也可以在其他選擇器中做定義，它將會作用在該選擇器所選取到的元素，而這個元素下的子元素，若也想要使用這個變數，因為繼承的關係，也可以獲得這個變數的值。

.dark-mode {
  --primary-color: #fbd67f;
}

CSS 變數除了可以使用 JavaScript 來做修改實現動態的調整變數值外，也可以搭配 calc() 來進行數值的計算，使得變數更加的強大。

.box {
  width: calc(100% - var(--size));
}

在 Master CSS 中使用變數

Master CSS 也支援定義與取用原生 CSS 變數的標記方式，透過使用 $ 符號就可以來聲明 CSS 變數。

語法：$key:value

範例：$primary-color:#f6bb00

定義變數

舉個例子：

<div class="$primary-color:#f6bb00 $size:5rem@sm">...</div>

產生的 CSS：

.\$primary-color\:\#f6bb00 {
  --primary-color: #f6bb00;
}
 
@media (min-width:834px) {
  .\$size\:5rem\@sm {
    --size: 5rem
  }
}

與選擇器一起使用

Master CSS 的變數標記，也支援選擇器，如下範例：

<div class="$size:2.5rem:hover">...</div>

產生的 CSS：

.\$size\:2\.5rem\:hover:hover {
  --size: 2.5rem;
}

響應式斷點

當然，定義不同裝置視窗尺寸的變數，也非常的容易。

<div class="$size:2.5rem@sm $size:4rem@md">...</div>

產生的 CSS：

@media (min-width: 768px) {
  .\$size\:2\.5rem\@sm {
    --size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .\$size\:4rem\@md {
    --size: 4rem;
  }
}

風格化影子 DOM（Shadow DOM）

假設這是你的自訂元素與 DOM Tree

<test-element>
  ▼ #shadow-root (open)
    <button part="button"></button>
</test-element>

這個影子 DOM 的元素，封裝了如下的樣式規則

:host {
  --button-bg: red;
}

[part=button] {
  background: var(--button-bg);
}

你可以透過 Master CSS 的標記來適用所封裝的樣式規則

<test-element class="$button-bg:red $button-bg:pink@sm">
  ▼ #shadow-root (open)
    <button part="button"></button>
</test-element>