一、前言

在 JavaScript 的世界裡有變數，那初學者們也知道 CSS (階層式樣式表，Cascading Style Sheets)也有嗎？以下內容以我工作上常用的做介紹與舉例～

二、CSS 的變數運用技巧

1. 宣告css變數

將會運用到的變數都放在 :root 選取器內，並且使用 –自訂名稱作為屬性的方式來宣告變數。

1
2
3
4
:root {
  --primary: Aquamarine;
  --background-color: Teal;
}

2. 使用css變數

取值的階段，取值時前方依然是撰寫我們需要套用的樣式屬性，後方再接著使用 var (–變數名稱) 來套用。

1
2
3
body {
  background: var(--background-color);
}

3. 在RWD使用css變數

製作響應式時，因為螢幕大小的不同通常會需要調整文字大小來符合需求，最常見的方式就是透過選取器一一覆蓋字體大小，如果透過變數的方式就可以統一切換整體文字大小，不需要一一的調整每個選取器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
:root {
  --font-size: 14px;
}
/* 使用變數定義文字大小 */
p {
  font-size: var(--font-size);
}
/* 除此之外，還可以透過 calc 用相同變數做運算，讓特定的文字更大獲更小 */
h1 {
  font-size: calc(var(--font-size) * 1.5);
}
@media (min-width: 480px) {
  :root {
    --font-size: 18px;
  }
}

三、結論與自我鼓勵

我在初學網頁設計時，最先接觸到的是 HTML 和 CSS，但因為只是買初階的線上課程，並未學得很深入，後來才知道還有選取器、變數和 SCSS 等這麼多實用技巧，可以不用寫冗長的程式碼，也能達到想要的樣式編排效果，每學一點新的，真的就讓我對做網頁更有興趣了！