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

標籤: CSS CSS3

在還沒有原生的 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);
}

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