SASS / SCSS 簡介

SASS 是 CSS 的預處理器，它能編譯出原生 CSS，且提供了更多程式面的東西來撰寫 CSS，讓其更簡潔、更好維護，而 SASS 分為 SASS 與 SCSS 兩種，兩者皆稱為 SASS，讓我們看看差異

sass

• 使用縮排區隔程式碼
• 無法相容原生 CSS
• 檔名為 *.sass

.text-primary
  color: #007bff

scss

• 使用大括號區隔程式碼
• 可完全相容原生 CSS
• 檔名為 *.scss

.text-primary {
  color: #007bff;
}

另外兩者有些語法上的不同，但大部份都是相同的唷~

安裝環境

常用的編譯方法有三種，分別為以下

1. 編譯套件: 透過 Webpack、Gulp 等套件，整合 sass-loader 來編譯
2. 編譯軟體: 透過 Prepros 等軟體編譯
3. 編輯器插件: VSCode 的 Live Sass Compiler 等來做編譯，設定部分可參考這裡

變數

CSS 本來就可以撰寫變數，而 SCSS 則讓變數的寫法更容易，只須在開頭加上 $ 即可，變數讓我們更好的控管 CSS，遇到需重複使用的數值即可宣告為變數，後續如果客戶要修改也只要調整一個變數，便可達到全站修改

編譯前

$primary: #007bff;
$font-size: 20px;
.text-primary {
  color: $primary;
  font-size: $font-size;
}

編譯後

.text-primary {
  color: #007bff;
  font-size: 20px;
}

運算

SASS 可以直接使用加、減、乘、除等來做基本的運算，但是單位須特別注意，否則會出錯，另外如果兩個相同單位相除後，單位會被互相抵消，所以也可以利用此特性做單位的換算

編譯前

$font-size: 20px;
$lv: 2;
.text1 {
  font-size: $font-size + 10px;
}
.text2 {
  font-size: $font-size - 4px;
}
.text3 {
  font-size: $font-size * $lv;
}
.text4 {
  font-size: $font-size / $lv;
}
.text5 {
  font-size: (5px/5px)rem;
}

編譯後

.text1 {
  font-size: 30px;
}
.text2 {
  font-size: 16px;
}
.text3 {
  font-size: 40px;
}
.text4 {
  font-size: 10px;
}
.text5 {
  font-size: 1 rem;
}

巢狀與連接符 ( & )

巢狀寫法可以讓 CSS 更好管理，連接符則替代父選擇器，省下了重複撰寫的時間，但過於巢狀也會導致程式碼不好維護，盡量在三層內解決

編譯前

$primary: #007bff;
$font-size: 20px;
.navbar {
  color: $primary;
  font: {
    family: '微軟正黑體';
    size: $font-size / 2;
  }
  .logo {
    width: 50px;
  }
  &:hover {
    color: #000;
  }
  &-item {
    font-weight: bold;
  }
}

編譯後

.navbar {
  color: #007bff;
  font-family: '微軟正黑體';
  font-size: 10px;
}
.navbar .logo {
  width: 50px;
}
.navbar:hover {
  color: #000;
}
.navbar-item {
  font-weight: bold;
}

@mixin

@mixin 的寫法為在前方先宣告，後面接上名字，參數帶入與不帶入都行，如要帶入參數則使用 ()，撰寫樣式時用 @include 來載入，此方法可以減少重複撰寫程式碼

• 字串內寫入變數: 使用 #{...}，並將變數寫在裡面
• 預設值: 在變數後方加上 :，並寫入數值

編譯前

@mixin color {
  color: blue;
}
@mixin shape($img, $radius: 10px) {
  width: 100px;
  height: 100px;
  background-image: url('~/assets/images/#{$img}');
  border-radius: $radius;
}
.square {
  @include color;
  @include shape('hero.png');
}
.round {
  @include color;
  @include shape('hero.png', 50px);
}

編譯後

.square {
  color: blue;
  width: 100px;
  height: 100px;
  background-image: url("~/assets/images/hero.png");
  border-radius: 10px;
}
.round {
  color: blue;
  width: 100px;
  height: 100px;
  background-image: url("~/assets/images/hero.png");
  border-radius: 50px;
}

@extend

@extend 會將同樣的程式碼整合在一起，用法則是在需要增加樣式的地方加上 @extend，通常會搭配 % 一起使用，前方加上 % 的樣式不會被編譯，這樣一來樣式就會被收集到該位置，但建議將樣式放在最上面，以防覆寫掉其他樣式

編譯前

%link-btn {
  display: inline-block;
  text-decoration: none;
}
.link-primary {
  color: blue;
  @extend %link-btn;
}
.link-secondary {
  color: red;
  @extend %link-btn;
}

編譯後

.link-primary, .link-secondary {
  display: inline-block;
  text-decoration: none;
}
.link-primary {
  color: blue;
}
.link-secondary {
  color: red;
}

@mixin 與 @extend 的差異

@mixin 與 @extend 皆可達到減少撰寫重複程式碼的目的，那怎麼選擇呢 ?

• @mixin: 將樣式碼寫入 class 內，可用變數
• @extend: 將樣式獨立出來，不可用變數

基本上 @extend 是將 CSS 集中，所以程式碼較少，相反的，@mixin 則是寫一次就多產生一次 CSS，所以程式碼較多，較簡單的分辨方式是，如需使用變數就使用 @mixin，不需要則使用 @extend

@function

我認為 @function 與 @mixin 是有點像的，都是在做運算處理，兩者的差異在於 @function 必須使用 @return 來返回結果，且輸出的是一個值，並非一段 CSS 樣式

編譯前

$base-font-size: 16px;
$space: 4px;
@function font($lv: 0) {
  @return ($base-font-size + $space * $lv) / $base-font-size * 1rem;
}
.h6 {
  font-size: font();
}
.h5 {
  font-size: font(1);
}
.h4 {
  font-size: font(2);
}

編譯後

.h6 {
  font-size: 1rem;
}
.h5 {
  font-size: 1.25rem;
}
.h4 {
  font-size: 1.5rem;
}

@function 結合 @mixin

@function 有時也會拿來與 @mixin 做結合，並應用在一些字級或是單位的換算，以下做了一個產生對應字級，並且換算 rem 的範例

編譯前

$base-font-size: 16px;
$space: 4px;
@function font($lv) {
  @return ($base-font-size + $space * $lv) / $base-font-size * 1rem;
}
@function line($fontSize) {
  @return $fontSize * 1.5;
}
@mixin baseFont($lv: 0) {
  font-size: font($lv);
  line-height: line(font($lv));
}
.h6 {
  @include baseFont();
}
.h5 {
  @include baseFont(1);
}
.h4 {
  @include baseFont(2);
}

編譯後

.h6 {
  font-size: 1rem;
  line-height: 1.5rem;
}
.h5 {
  font-size: 1.25rem;
  line-height: 1.875rem;
}
.h4 {
  font-size: 1.5rem;
  line-height: 2.25rem;
}

SASS 內建 @function

SASS 內有幫我們寫好許多好用的 @function 可直接使用，這邊以顏色為例

編譯前

.h1 {
  // 調暗 20%
  color: darken(#007bff, 20%);
}
.h2 {
  // 調亮 20%
  color: lighten(#007bff, 20%);
}
.h3 {
  // 互補色
  color: complement(#007bff);
}
.h4 {
  // 提高飽和度 20%
  color: saturate(#007bff, 20%);
}
.h5 {
  // 降低飽和度 20%
  color: desaturate(#007bff, 20%);
}

編譯後

.h1 {
  color: #004a99;
}
.h2 {
  color: #66b0ff;
}
.h3 {
  color: #ff8400;
}
.h4 {
  color: #007bff;
}
.h5 {
  color: #1a7ce6;
}

SASS 還有非常多的內建的 @function 可使用，詳細可參考官網

@import

import 並不是 SASS 特有的功能，但是 SASS 擴展了此功能，讓其可以載入 .sass 與 .scss 檔，將 SASS 分為數個檔案彙整至一隻檔案可減少請求數，也方便維護與管理

• 可以載入 .css 檔
• 若沒有輸入檔名，則預設為 .sass 或 .scss 檔
• 若檔名前加上 _ 則該檔案不會被編譯
• 編譯有順序性，因此需先載入變數等必要檔案

import 檔案的順序各位可以自己思考，這邊分享一下小弟的順序

@import './src/scss/_function';
@import './src/scss/_mixin';
@import './src/scss/_reset';
@import './src/scss/_extend';
@import './src/scss/_layout';
@import './src/scss/_pages';
@import './src/scss/_button';

結語

SASS 熟悉後其實是非常好用的，開發效率也提升了許多，最重要的是客戶修改的時候可以省下非常多時間，或許剛開使不習慣，但可以循序漸進，從簡單的 變數 或 巢狀 開始寫，最後再慢慢的用到 @function 與 @mixin，那就開始動手寫自己的 SASS 吧!