CSS 變數 ( CSS Variables )

W3C 在 2012 年 已經制定了 CSS 的變數規範，目前幾乎所有瀏覽器都支援 CSS 變數語法，透過變數的應用，CSS 程式碼將會變得更容易閱讀、管理和維護，這篇教學將會深入介紹 CSS 的變數，包含宣告、使用、全域變數、區域變數和行內變數等用法。

快速導覽：

• 宣告變數、使用變數
• 全域變數、區域變數
• HTML 行內 CSS 變數
• 搭配 CSS media Queries
• 搭配 calc() 數學運算函式
• 使用 JavaScript 操控

宣告變數

CSS 宣告變數的方式如同 CSS 樣式屬性的寫法，但必須遵守下列規則：

• 「兩個破折號 --」開頭，後方連接「變數名稱」。
• 變數名稱使用「英文字母大小寫、數字、破折號和底線符號」，且開頭需為英文。
• 變數名稱區分大小寫，例如 --apple 和 --Apple 會被視為兩個不同的變數。
• 變數內容必須放入具有「單位」的數值、文字、色彩代碼。

下方的範例將會在 :root 裡定義三個變數：

:root {
  --size-1: 20px;
  --size-2: 30px;
  --size-3: 40px;
}

使用變數

宣告變數後，只在需要變數的樣式屬性裡，使用「var()」函式讀取變數數值，執行後就會自動帶入變數數值。

線上展示：https://codepen.io/oxxo/pen/gOJLvMN

<!-- HTML 程式碼 -->
<h1>oxxo.studio</h1>
<h2>hello world!!</h2>
<h3>good morning!!</h3>

<!-- CSS 程式碼 -->
<style>
  /* 宣告變數 */
  :root {
    --size-1: 20px;
    --size-2: 30px;
    --size-3: 40px;
  }
  /* 使用變數 */
  h1 {font-size: var(--size-1);}
  h2 {font-size: var(--size-2);}
  h3 {font-size: var(--size-3);}
</style>

全域變數

「全域變數」表示「所有元素都能使用的變數」，如果要宣告全域變數，通常會將變數寫在 :root 裡，或將變數寫在 html 或 body 元素裡，如此一來網頁中所有元素都可以使用變數，下方的例子執行後，不論 h1、h2 和 h3 位於哪個元素，只要在同一個網頁中，就會套用變數所設定的顏色。

線上展示：https://codepen.io/oxxo/pen/rNgWJLz

<!-- HTML 程式碼 -->
<h1>oxxo.studio</h1>
<div>
  <h2>hello world!!</h2>
</div>
<div>
  <div>
    <h3>good morning!!</h3>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  :root {
    --color1: red;
    --color2: green;
    --color3: orange;
  }
  h1 {color: var(--color1);}
  h2 {color: var(--color2);}
  h3 {color: var(--color3);}
</style>

區域變數

「區域變數」表示「某個元素裡才能使用的變數」，由於定義在指定元素內，不屬於這個元素的子元素 ( 兄弟元素或父元素 ) 就無法使用變數，下方的範例執行後，由於 h1 所使用的變數是定義在 div 裡的區域變數，當 h1 沒有被 div 包覆時，就無法讀取變數，只能呈現預設的黑色。

線上展示：https://codepen.io/oxxo/pen/bGyBLqV

<!-- HTML 程式碼 -->
<h1>oxxo.studio</h1>
<div>
  <h2>hello world!!</h2>
</div>
<div>
  <div>
    <h3>good morning!!</h3>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  /* 變數只有在 div 裡才有作用 */
  div {
    --color1: red;
    --color2: green;
    --color3: orange;
  }
  h1 {color: var(--color1);}  /* 如果 h1 沒有被 div 包覆，就無法讀取變數數值 */
  h2 {color: var(--color2);}
  h3 {color: var(--color3);}
</style>

如果元素裡定義的變數名稱和父元素裡的變數名稱相同 ( 或和 :root 定義的全域變數名稱相同 )，則會使用「覆寫」的方式取代上一層變數的數值，以下方的程式碼為例，雖然 :root 定義了三個變數，但如果 div 裡也有同樣的變數名稱，則 div 裡的變數內容就會覆寫 :root 的變數內容，最後呈現的顏色就會是 div 裡變數定義的顏色。

線上展示：https://codepen.io/oxxo/pen/JjqbpyB

<!-- HTML 程式碼 -->
<h1>oxxo.studio</h1>
<div>
  <h2>hello world!!</h2>
</div>
<div>
  <div>
    <h3>good morning!!</h3>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  /* 全域變數 */
  :root {
    --color1: red;
    --color2: green;
    --color3: orange;
  }
  /* 區域變數如果名稱相同，就會覆寫內容 */
  div {
    --color2: blue;  /* 最後呈現藍色 */
    --color3: green; /* 最後呈現綠色 */
  }
  h1 {color: var(--color1);}
  h2 {color: var(--color2);}
  h3 {color: var(--color3);}
</style>

HTML 行內 CSS 變數

CSS 的變數除了寫在 CSS 的檔案裡，也可以寫在 HTML 標籤行內，寫在行內的變數由於最靠近要套用的元素，所以基本上一定會覆蓋之前的變數，下方的範例執行後，就會按照行內定義的變數內容，將文字都變成綠色。

線上展示：https://codepen.io/oxxo/pen/ZENBraX

<!-- HTML 程式碼 -->
<h1 style="--color1: green;">oxxo.studio</h1>
<div style="--color2: green;">
  <h2>hello world!!</h2>
</div>
<div style="--color3: green;">
  <div>
    <h3>good morning!!</h3>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  /* 雖然定義了全域變數，但因為行內變數最接近套用的元素，所以會以行內變數為主 */
  :root {
    --color1: red;
    --color2: green;
    --color3: orange;
  }
  h1 {color: var(--color1);}
  h2 {color: var(--color2);}
  h3 {color: var(--color3);}
</style>

搭配 CSS media Queries

CSS 的變數非常適合搭配 media Queries 來使用，透過 CSS 變數，在不同 media 顯示尺寸之下，一次性的設定各種數值，避免不斷輸入重複的數值，下方的範例執行後，當網頁寬度小於 400px，所有文字都會呈現灰色，當寬度大於 400px，就會以彩色呈現。

線上展示：https://codepen.io/oxxo/pen/bGyBLvp

<!-- HTML 程式碼 -->
<h1>oxxo.studio</h1>
<div>
  <h2>hello world!!</h2>
</div>
<div>
  <div>
    <h3>good morning!!</h3>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  :root {
    --color1: red;
    --color2: green;
    --color3: orange;
  }
  @media (max-width:400px){
    :root{
      --color1: gray;
      --color2: gray;
      --color3: gray;
    }
  }
  h1 {color: var(--color1);}
  h2 {color: var(--color2);}
  h3 {color: var(--color3);}
</style>

搭配 calc() 數學運算函式

CSS 變數也可以和 CSS 的 calc() 函式互相搭配，做出更多不同的變化效果，下面的例子會將三個 div 同時套用同一個 CSS 變數，並運用 calc() 函式計算寬度。

線上展示：https://codepen.io/oxxo/pen/GRaNQXg

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  :root{
    --w: 50px;
  }
  div {
    border: 1px solid black;
    margin: 5px;
    height: 50px;
  }
  .a{
    width: calc(50vw + var(--w));
  }
  .b{
    width: calc(30vw + var(--w));
  }
  .c{
    width: calc(20vw + var(--w));
  }
</style>

使用 JavaScript 操控

如果運用 JavaScript 將寫入元素行內屬性的方法，就能利用行內的 CSS 變數控制樣式，寫入方法有下面幾種：

• .style.getPropertyValue：讀取某個屬性。
• .style.setProperty：設定某個屬性。
• .style.cssText：覆寫整個 style 屬性。
• .setAttribute：覆寫整個 style 屬性。

舉例來說，假設已經在 :root 設定變數數值，仍然可以使用 JavaScript 在元素裡添加行內變數，下方的範例執行後，h1 和 h2 的顏色最後會被 JavaScript 的行內變數內容所覆寫而呈現灰色。

線上展示：https://codepen.io/oxxo/pen/dyEOdwE

<!-- HTML 程式碼 -->
<h1>oxxo.studio</h1>
<h2>hello world</h2>

<!-- CSS 程式碼 -->
<style>
  :root{
    --h1: red;
    --h2: green;
  }
  h1{
    color: var(--h1);
  }
  h2{
    color: var(--h2);
  }
</style>

<!-- JavaScript 程式碼 -->
<script>
  const h1 = document.querySelector('h1');
  h1.style.setProperty('--h1','#ccc');

  const h2 = document.querySelector('h2');
  h2.style.setProperty('--h2','#ccc');
</script>

小結

CSS 變數是近年來撰寫 CSS 一定要使用的功能，透過 CSS 變數定義共用的寬度或字體樣式，可以讓整份 CSS 文件更加乾淨清楚且容易管理，趕緊運用 CSS 變數來改善自己的 CSS 吧！

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～