說來慚愧,立志成為一名前端工程師的我,只會純 CSS 跟框架來幫網頁做樣式,對於 SASS 這個好用的語言工具卻是知道的不多,所以想趁有時間來學一下 SASS,就開了這個學習筆記系列。

何謂 SASS?

根據維基百科中介紹,SASS 全名為 Syntactically Awesome Stylesheets,是一個將指令碼解析成 CSS 的手稿語言,也就是 SassScript。SASS 有兩種語法,一種是 SASS,另一種是 SCSS,那麼兩種有什麼差別呢?

這是 SCSS 的寫法:

這是 SASS 的寫法:

跟普通的 CSS 相比,SCSS 是相對好入門的寫法,在相同架構下,例如 li 就可以寫在 ul 中,而且寫法差不多;而 SASS 看起來架構也一樣,差別在於完全沒有大括號跟分號,感覺很適合懶人的寫法。
不過我似乎很少看到有人使用 SASS,也許是我孤陋寡聞,看的東西不夠多qq。所以為了避免未來協作實務上的困難,所以我之後的實用還是會以 SCSS 為主。

變數運用

前面稍微簡單介紹一下 SCSS 語法之間的差異,這裡就要來講一下 SCSS 好用的地方 - 變數

在寫 CSS 時,有時候會遇到文字或是區塊共用同樣的顏色,例如下方例子:

如果遇到需要改變顏色的需求時,可能就得要一個一個更換。
不過在 SCSS 就可以運用到變數的概念,設定變數也很簡單,一個錢字符號加上變數的名稱,後面設定想要的效果,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 設定字型大小
$size-xl: 40px;
// 設定字型顏色
$font-color: red;

.header {
font-size: $size-xl;
color: $font-color;
}

.content {
font-size: $size-xl;
color: $font-color;
}

.footer {
font-size: $size-xl;
color: $font-color;
}

以上就可以一口氣更換大量的效果,如果想要再改的話,只要變更變數的值就可以了,非常靈活。

SCSS 變數做加減乘除好方便

傳統 CSS 要做數值運算的話,得要透過 calc() 才能做到,不過在 SCSS 中的變數,很輕易的就可以做到跟一般的程式語言一樣的數值運算,例如:

1
2
3
4
5
6
7
8
9
10
11
12
// 設定一個基準
$font-m: 20px;
// 將基準 * 2
$font-l: $font-m * 2;

h1 {
font-size: $font-l;
}

p {
font-size: $font-m;
}

字串運用

變數在 SCSS 中也可以做一般程式語言字串的使用,例如:

1
2
3
4
5
6
7
8
9
10
@import url('https://fonts.googleapis.com/css2?family=Kufam&display=swap');
$font-family-base: 'Kufam', cursive;

h1 {
font-family: $font-family-base;
}

p {
font-family: $font-family-base;
}

透過 darken、lighten 來調顏色

darken、lighten 是 SCSS 內建的功能,可以用來微調顏色,是一個非常有趣的功能,使用方法是 darken(orange, 10%);,這樣就可以將 orange 的顏色調深 10%,反之 lighten 就是調淺,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$bg-red: red;
$bg-green: green;

h1 {
background-color: lighten($bg-red, 30%);
}

p {
background-color: darken($bg-green, 10%);
}

span {
background-color: darken(orange, 10%);
}