---
tags: CSS, 六角筆記王
title: CSS - 預處理器 SASS/SCSS
---

# CSS - 預處理器 SASS/SCSS

## 預處理器
- 相容一般寫法
- 具有類似變數、迴圈與函式等寫法

## ▶ SASS/SCSS
- SASS 無分號與括號
- SCSS 與一般 CSS 相同，相容性高

### ✏ 編譯
由於 SASS 需要經由編譯才能產生出正常的 CSS，在一開始的大圖中，可以看到 :
- 多數檔案名稱前方有個 `_` 符號，代表它是需要被編譯的檔案
- 在正式 CSS 檔案中不需要產生
- 可以在編輯器中，調整 CSS 存放路徑與檔名
- 若有看到 `.map` 這是編譯過程中，檢查有無錯誤用的

推薦編譯方式 :
- 使用 VScode，安裝套件 Live Sass Compiler
- 使用 Codepen，CSS 選項調整成 SASS/SCSS

### ✏ 變數
類似於 JavaScript 定義變數，變數名稱前加上 `$` 號，並寫下變數名稱。

$primary: #000000;

a {
  color: $primary;
}

像這樣，a 連結的顏色就會被變更為 `$primary` 這個自定義變數的值。日後要變更顏色時，只要更動變數值即可。

### ✏ 嵌套
傳統寫 CSS 時，可能需要設定某個群組內層，像是這樣 :

.section {
  padding: 10px;
}

.section h2 {
  color: red;
}

改用 SASS/SCSS，可以這樣寫 :

.section {
  padding: 10px;
  h2 {
    color: red;
  }
}

編譯出來的結果，會是一樣的，大幅提高閱讀性並且好管理。也能搭配 CSS 選擇器使用。

### ✏ 連接符號 `&`
若使用 BEM 寫法，同類型不同狀態或區塊的 class，可以這樣寫 :

// 此為 BEM 命名概念，可以產生出 
// .list .list__item .list__item.active
.list {
  margin-left: 10px;
  &__item {
    padding: 10px;
    &.active {
      color: red;
    }
  }
}

// 或是可以這樣寫，可以產生出 .pt-2
.pt {
  &-2 {
    padding-top: 1rem;
  }
}

### ✏ 迴圈
假設 class 是相同類別時，可以利用迴圈的概念，這邊需要用到變數才能進行。

$space: (
  "1": 0.5rem,
  "2": 1rem,
);

@each $name, $value in $space {
  .pt-#{$name} {
    padding-top: $value;
  }
}

範例可以產生出 .pt-1 與 .pt-2，將它們拆解可以分成 :
- `$space`，變數可以這樣寫，具有多個屬性名稱與值，類似物件概念
- `@each`，告知 SASS 使用迴圈
- `$name`，自定義參數，只使用在這個迴圈，第一個參數指向屬性名稱
- `$value`，自定義參數，只使用在這個迴圈，第二個參數指向屬性值
- `in`，迴圈關鍵字

### ✏ 變數內容合併、取得、移除
若有多個變數內容需要整併或移除，可以利用 sass 其中一個功能，maps function 來達到目的，比較常用的有這些 :
- `map-get`，取得變數中的某一屬性與值
- `map-merge`，合併變數中所有屬性與值
- 若有相同屬性名稱，則以後者為主
- `map-remove`，刪除變數中某一屬性與值
- [範例，可以點我看編譯後結果](https://codepen.io/hsuan333/pen/poPXQLV)

// 假設有一組預設字體大小
$default-font-size: (
  smaller: 12px,
  small: 14px,
  medium: 1rem,
);

// 需要增加的字體大小
$font-size: (
  large: 20px,
  larger: 24px,
  huge: 36px,
  huger: 48px,
);

// 移除內容，若不需要某一個值，可以使用 map-remove
$default-font-size: map-remove($default-font-size, smaller);

// 合併內容，$merge 名稱可自定義
$merge: map-merge($default-font-size, $font-size);

// 利用 @each 產生結果
@each $name, $value in $merge {
  .fz-#{$name} {
    font-size: $value;
  }
}

// 取得內容，好處是統一在變數中做修改，而非直接定義
h1 {
  font-size: map-get($font-size, "huger");
}

### ✏ 混入

// 先定義一組變數
$grid-breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
  "xxl": 1400px
);

// 定義 mixin 的名稱與參數名
@mixin media-breakpoint-up($breakpoint) {
  @media (min-width: map-get($grid-breakpoints, $breakpoint)) {
    @content;
  }
}

// 意思是裝置大小在 md 以上就為藍色
a {
  @include media-breakpoint-up(md) {
    color: blue;
  }
}

上述範例可以拆解成 :
- `@mixin`，告知 SASS 使用 mixin
- `media-breakpoint-up`，這是自定義名稱
- `$breakpoint`，這是自定義參數
- `map-get`，map function 其中一個功能，可以從變數取得值
- `@content`，後續要放入的內容
- `@include`，插入 mixin 的名稱

## 參考來源
> 1. [Alphacamp - Sass/SCSS 基本語法介紹，搞懂CSS 預處理器](https://tw.alphacamp.co/blog/css-preprocessor-sass-scss)
> 2. [yuski - SASS : SASS Maps - get、merge、remove](https://ithelp.ithome.com.tw/articles/10207093)