使用 CSS 變數管理樣式

使用 CSS 變數，讓樣式的管理更為方便、視覺上更有統整性。

基礎寫法

基本上定義變數，會將變數寫在 :root 裡，讓網頁中所有元素的 CSS，都能使用這個變數。

• 宣告(以兩個破折號 – 作為開頭)： –名稱: 值;
• 使用(以 var 作為開頭)： 屬性：var(–名稱[, 預設值]);

預設值(非必要)可以在無法讀取變數名稱時自動套用。

:root {     /* 宣告變數 */
    --bg_color: lightblue;
}

.box1 {     /* 使用變數 */
    background-color: var(--bg_color);
}

.box2 {     /* box2讀取不到 color 變數，所以使用 green  */
    background-color: var(--color, green);
}

全域變數

將變數寫在 :root 裡，或寫在 html 與 body 裡，讓網頁的元素也都可以使用這個變數。

區域變數

• 寫在不同網頁元素內
• 若變數名與父元素相同，而在父元素重新賦值，則會套用父元素的變數數值

  :root {
      --bg_color: lightblue;
      --color: yellow;
  }
  
  .box1 {
      background-color: var(--bg_color);
      --color: orange;   /* 在 box1 裡面覆寫 --color 的值*/
  }
  
  h1 {   /* box1 裡面的 h1 的顏色會是 orange */
      color: var(--color);
  }

搭配 calc 數學運算

:root {
    --w: 20%;
}

div {
    width: calc(50% + var(--w));  /* 寬度為 50% + 20% */
}

JavaScript 操作

• .style.setProperty

  const root = document.documentElement;
  root.style.setProperty('--color', 'red');

• .style.cssText

  const root = document.documentElement;
  root.style.cssText = '--color: red';

參考資料 :
oxxostudio