SCSS 變數運用

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

何謂 SASS？

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

這是 SCSS 的寫法：

See the Pen scss sample by Bucky Chu (@bucky0112) on CodePen.

這是 SASS 的寫法：

See the Pen sass sample by Bucky Chu (@bucky0112) on CodePen.

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

變數運用

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

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

See the Pen same color by Bucky Chu (@bucky0112) on CodePen.

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

// 設定字型大小
$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 中的變數，很輕易的就可以做到跟一般的程式語言一樣的數值運算，例如：

// 設定一個基準
$font-m: 20px;
// 將基準 * 2
$font-l: $font-m * 2;

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

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

字串運用

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

@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 就是調淺，例如：

$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%); }