寫 CSS 的時候常常會有些設定是重複出現的，SASS(SCSS)是一個方便的預處理器，提供了變數、函式、繼承...等方法，省去這些重複撰寫的時間，雖然 CSS 已經有原生變數的功能，但是 SASS(SCSS) 提供的函式方法、邏輯判斷都還是無法取代的。

SCSS 和 SASS 的差異

SASS：去除大括號和分號，靠縮排 (Tab) 及換行來區隔，跟 CSS 寫法差距較大。

.box
    width: 50%
    margin: 0 auto
    p
        margin: 10px
    a
        text-decoration: none

SCSS：提供巢狀寫法，其他部分和 CSS 一樣，可以延續寫 CSS 的模式，需要時再加入 SCSS 的用法。

.box {
    width: 50%;
    margin: 0 auto;
    p {
        margin: 10px;
    }
    a {
        text-decoration: none;
    }
}

SCSS 的功能

快速辨識 SCSS 應用時機：

• 變數的前面用 $ 表示。
• 方法的前面用 @ 表示。

Variables（變數）

字型、色彩這類主題性的樣式會重複使用，如果整個風格需要修改時很容易改錯或是遺漏，把這些樣式存到變數中，之後只要變更變數的值，就能讓所有套用的樣式一次全部改完。

// 宣告
$primaryColor: #aabb00;

.text {
  // 引用
  color: $primaryColor;
}

Nesting（巢狀套用）

撰寫某區塊的特定樣式時，不需要重複一直打父層名稱，只要像 HTML 一樣巢狀架構撰寫就好。（巢狀不宜太多層，才能提高效能和管理）

.box{
    width: 50%;
    p{
        margin: 10px;
        a{
            text-decoration: none;
        }
    }
}

Mixin（混合）

變數只能存放單一的設定值（例如：顏色、大小），mixin 則是一整段的樣式可以重複使用，就不需要特地找到這段樣式複製貼上。

// 宣告
@mixin circle {
    height: 50px;
    width: 50px;
    background-color: pink;
    border-radius: 50%;
}

// 引用
.btn-candy {
    @include circle;
}

Mixin + 變數

可以用帶入參數的方式套用樣式，就能在同樣的架構下做出變化。

$primaryColor: #336699;

// 變數可以使用 : 給予預設值
@mixin circle($size, $color: pink) {
    height: $size;
    width: $size;
    background-color: $color;
    border-radius: 50%;
}

// 引用 @include (名稱)
.btn-candy {
    @include circle(60px, $primaryColor);
}

Mixin + 判斷式

可以用@if、@else if、@else來做出變化。

@mixin marginXorY($size, $direction) {
  @if $direction == vertical {
    margin-top: $size;
    margin-bottom: $size;
  } @else if $direction == horizontal {
    margin-left: $size;
    margin-right: $size;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.box {
  @include marginXorY(5px, horizontal);
}

Extend（繼承）

繼承（extend）和 混合（mixin）功能相似，也是能快速加入一段寫好的樣式，使用差異在下一段說明。

// 宣告
%hide {
    display: none;
}

.secret {
  // 引用
  @extend %hide;
  color: #fff;
}

Extend 和 Mixin 的差異

1. extend：編譯成 css後不會完整複製所有樣式，而是加到同一個類別去，這樣會減少重複樣式的產生，適合用在重複使用的固定樣式，例如：使用 float 排版時需要加上 clearFix 來避免破版，就可以用繼承。

// 編譯前
%hide {
    display: none;
}

.a {
    @extend %hide;
    color: #fff;
}

.b {
    @extend %hide;
    color: #eee;
}

//編譯後
.a, .b {
    display: none;
}
.a {
    color: #fff;
}
.b {
    color: #eee;
}

2. Mixin：編譯後會把樣式複製到引用的類別去，所以用的越多，重複程式碼越多，因為可以搭配變數和判斷式使用，適合重複使用又可以做變化調整的樣式。

// 編譯前
@mixin hide {
    display: none;
}

.a {
    @include hide;
    color: #fff;
}

.b {
    @include hide;
    color: #eee;
}

//編譯後
.a {
    display: none;
    color: #fff;
}
.b {
    display: none;
    color: #eee;
}

Function（函式）

跟 JavaScript 的函式沒什麼差別，可以搭配@if、@else、@for、@while...等邏輯判斷做出各種功能。

// 宣告
@function pow($num, $time) {
  $result: 1;
  @for $_ from 1 through $time {
    $result: $result * $num;
  }
  @return $result;
}

.box {
  // 引用
  margin-left: pow(2, 4) * 1px;
}

Import（引入）/ Use（引用）

import 在 JavaScript 中是常用的功能，SCSS 也提供這個方法，但是因為存在一些問題，將逐漸棄用，改為使用 use。

// 引用外部檔案 file/_forceReset.scss
@use 'file/forceReset';

Maps

有連續性關連的屬性值可以放在同一個變數中，就像 JavaScript 的物件陣列一樣，需要的時候從這個變數中取出指定的數值即可。

// 引用 sass 的方法
@use "sass:map";
// 宣告
$font-weights: ("regular": 400, "medium": 500, "bold": 700);

// 擴充
$font-weights: map.set($font-weights, "extra-bold", 900);

// 合併
$light-weights: ("lightest": 100, "light": 300);
$font-weights: map.merge($font-weights, $light-weights);

.title {
  // 取值
  font-weight: map.get($font-weights, "medium");
}

// 遍歷
@each $name, $value in $font-weights {
  .fw-#{$name} {
    font-weight: $value;
  }
}