Sass / SCSS 筆記:如何利用變數管理重複設定值?

使用 Sass / SCSS 管理 CSS 內容,除了能夠撰寫巢狀式語法架構外,還有像是變數、Mixin 等功能,可以幫助我們管理重複的 CSS 設定值或是語法,不但能夠優化 CSS 空間,也能夠增加日後開發的方便性。這篇文章就先來探討 Sass / SCSS 的「變數」。

什麼是變數?

在 Sass / SCSS 以及其它程式語言的世界裡,都是很好用而且非常重要的存在,變數就好比說,它是一個容器(例如碗),你可以命名這個容器的用途(比如小明的碗),可以在裡面裝一些東西。(例如白米飯),而在 Sass / SCSS 與其它程式語言,就會利用變數來放置程式計算邏輯、或是一些會被利用的數值或是字串。

在 Sass / SCSS 變數該如何宣告?

1
2
3
4
# Sass 範例
$變數名稱: 設定值
# SCSS 範例
$設定名稱: 設定值;

基本上可以看到 Sass 與 SCSS 指定變數的差別在於 Sass 不用且不能加分號,而 SCSS 寫法則與 CSS 一樣,需要用分號區隔前後屬性。這部分說明,可以回去複習上一篇「更便利於撰寫與管理 CSS 的工具 - Sass / SCSS,如何使用、編譯?」。

除了以上差異之外,基本上兩者宣告方式大同小異,首先要設定變數名稱,並在變數名稱前加上 $ 字號,其實這個概念很像是設定類別選擇器樣式那樣,會在類別名稱前加上 . 作為區隔。

設定完變數名稱後,後面會加上冒號與空格,再填入設定值,如此以來就完成了變數的宣告與指定值。

來段「顏色」與「字體大小」的範例吧

以前我們可能是這樣設計 CSS 的:

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.header {
background-color: pink;
}
.subTitle {
font-size: 20px;
}
.btn-pink {
background-color: pink;
font-size: 20px;

}
.footer {
background-color: pink;
}

HTML

1
2
3
4
5
6
7
8
9
10
<div class="header">
Lorem ipsum dolor sit amet.
</div>
<div class="wrap">
<h2 class="subTitle">title</h2>
<a href="#" class="btn-pink">按鈕</a>
</div>
<div class="footer">
Lorem ipsum dolor sit amet.
</div>

我希望網站主視覺是粉紅色、按鈕與副標題文字大小要有 20px。但萬一老闆或是客戶突然想要改變顏色跟文字大小,雖然說現在編輯器都有尋找與取代功能,但是當有成千上萬個設定值要修改時,還是會覺得很麻煩吧?

這時使用變數的好處來了。此時,你就能利用 Sass / SCSS 變數將語法改寫成這樣:

Sass / SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# Sass 範例

$primary: pink
$font-lg: 20px

.header
background-color: $primary
.subTitle
font-size: $font-lg
.btn-secondary
background-color: $primary
font-size: $font-lg
.footer
background-color: $primary

# SCSS 範例

$primary: pink;
$font-lg: 20px;

.header {
background-color: $primary;
}
.subTitle {
font-size: $font-lg;
}
.btn-secondary {
background-color: $primary;
font-size: $font-lg;

}
.footer {
background-color: $primary;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
<!-- HTML -->
<div class="header">
Lorem ipsum dolor sit amet.
</div>
<div class="wrap">
<h2 class="subTitle">title</h2>
<!-- 將 btn-pink 改為 btn-secondary -->
<a href="#" class="btn-secondary">按鈕</a>
</div>
<div class="footer">
Lorem ipsum dolor sit amet.
</div>

如此一來,我只要更改變數的設定值,我就能夠瞬間更改所有套用此變數的屬性,是不是方便了許多?

我有寫一個範例放置在 codePen 上,大家可以點擊「Sass / SCSS 變數範例」來動手操作看看。當然,還有許多不同的使用情境可以運用到變數,大家也可以思考還有哪部分能夠利用變數最佳化 CSS 語法。

宣告變數請盡可能寫在前面

Sass / SCSS 的編譯方式是由上而下編譯的,因為這個特性,我們必須把變數放置在使用變數之前。以下列這個錯誤例子來舉例:

1
2
3
4
5
6
# SCSS 範例
.btn-secondary {
color: $orange;
background-color: $orange;
}
$orange: orange;

這邊就不舉例 Sass 範例了,大家去嘗試這個範例的話可以發現是跑不動的,原因是 Sass / SCSS 由上而下編譯時,.btn-secondary 雖然想要取得 $orange 的設定值,但因為此時還沒有編譯到 $orange 這個變數,因此這時是無法取得 $orange 的設定值的。

因此在使用變數時,請盡可能將變數宣告移至最前面,如此一來比較能夠確保所宣告的變數在使用時,已經都被 Sass / SCSS 編譯器進行編譯。

後記

其實這是我第二次寫這篇文章了,本來是星期四或五要發佈,結果一個 GG,電腦當機!!然後 Typora(線下 Markdown)不但沒記錄到存檔,內容還直接給我通通不見……我直接整個無言 QQ(而且我還隨時都在按 Ctrl + S 儲存啊!!)

無奈之餘還是要將文章給發出來啊,所以大家如果看到這篇,還請多多支持啦,這是我用淚水刻出來的文章(QQ

雖然難過,不過我自己是覺得這篇寫得比上一次還好(自己說 XD),頓時也沒這麼難過了(?)下一篇就會提到 Mixin 的部分了,敬請期待囉,也希望電腦給力點啊!