[CSS] CSS 原生變數(CSS Variables)使用技巧與說明

在還沒有原生的 CSS 變數之前，很多人應該在使用 SCSS 等工具在撰寫的時候感受到變數的方便，而 CSS 在近年也有了原生的變數可以使用，搭配好還是可以在撰寫純 CSS 的時候讓 code 變得更好維護。

基礎寫法：

• 宣告：--名稱: 值;

• 使用：屬性：var(--名稱, 預設值); ( 預設值為選填 )

用法示範如下：

:root {
  --main-color: #06c;        // 宣告顏色
}
h1 {
  color: var(--main-color);  // 使用變數
}

而變數的使用也可以分成全域或區域變數，使用方法如下：

全域變數：

如果想要讓整個 CSS 檔都能讀到變數，則可以把變數設定在 :root 選擇器裡，:root 為網頁的根元素，如果不習慣看到 :root，也可以設定在 body 或 html。

:root{
  --main-color: #f00;
}
h1, h2{
  color: var(--main-color);
}

區域變數：

相對於全域變數，如果不將變數設定在 :root、body或 html，這樣變數就只會在選擇器範圍內作用。

h1{
  --main: #f00;
  color: var(--main-color);
}
h2{
  color: var(--main-color); // 無法使用 --main-color 的顏色
}

也可以用以下方法複寫 CSS 變數。

<h1>Hello <i>World</i> !!!</h1>

:root{
  --main: #f00;
  --second: #f00;
}
h1{
  color: var(--main);
  --second: #00f;    // 複寫 --second 的數值
}
i{
  color: var(--second);
}

像這樣 i 裡面就會是複寫後的樣式。

行內樣式變數

行內樣式變數就更有趣了，只要把變數設定好，就能透過行內元素給定值。

設定 CSS 如下：

h1{
  color: var(--main-color);
}

接下來就可以透過行內樣式修改 css 的值：

<h1 style="--main-color: #f00;">Hello World</h1>

搭配 media query

CSS 的變數就很適合搭配 media query，這邊看個範例：

:root{
  --color: #f00;
  --size: 18px;
}
@media (max-width: 768px){
  :root{
    --color: #00f;
    --size: 14px;
  }
}
h1{
  color: var(--color);
  font-size: var(--size);
}

像這樣就可以很方便的設定在不同狀況下不一樣的樣式了。