变数 ( Variables )

W3C 在 2012 年 已经制定了 CSS 的变数规范，目前几乎所有浏览器都支援 CSS 变数语法，透过变数的应用，CSS 程序码将会变得更容易阅读、管理和维护，这篇教学将会深入介绍 CSS 的变数，包含宣告、使用、全域变数、区域变数和行内变数等用法。

快速导览：

• 宣告变数、使用变数
• 全域变数、区域变数
• HTML 行内 CSS 变数
• 搭配 CSS media Queries
• 搭配 calc() 数学运算函数
• 使用 JavaScript 操控

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

宣告变数

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>

虽然可以覆写区域变数，但区域变数同样也会被“权重”所影响，且因为是区域变数的缘故，修改后的变数数值不会影响到其他兄弟元素的内容，下方的例子将会不断修改变数 --color 数值，虽然一开始设定黑色，但受到权重的影响，文字会呈现不同颜色，且透过变数的方式，只要单纯修改变数数值就能修改文字颜色。

注意，变数放置的位置就算在样式属性的后方，只要在同一个选择器里，就会先读取变数数值，在执行样式属性。

线上展示：https://codepen.io/oxxo/pen/YPKwdVK

<!-- HTML 程式碼 -->
把滑鼠移動到下方文字上
<h2>我會變色 
  <span class="s">( 不會變色 )</span>
</h2>
<h2 id="h">不會變色
  <span>( 不會變色 )</span>
</h3>

<!-- CSS 程式碼 -->
<style>
  :root {--color: black;}
  h2, h3 {border: 1px solid #000;}
  h2 {
    color: var(--color);
    --color: red; 
  }
  span {
    color: var(--color);
    --color: green;
  }
  h2 span {--color: blue;}
  h2:hover {--color: green;}
  .s {--color:gray;}
  #h {--color: black;}
</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 吧！

意见反馈