###### tags: `Front-End` `CSS預處理器` `SASS` `gulp` `webpack`
# [week 13] 前端工具之二 - CSS 預處理器、Babel

> 本篇為 [[FE201] 前端中階：那些前端會用到的工具們](https://lidemy.com/p/fe201) 這門課程的學習筆記。如有錯誤歡迎指正。

## 前言

在使用新工具之前，大致會依照下列步驟：
1. 安裝工具
2. 閱讀官方文件
3. 更改設定檔

---

## SASS：CSS 預處理器

在進入 CSS 預處理器之前，先談談 CSS 在開發上可能遇到哪些問題：

- 全域會互相干擾
- 例如：在 index.html 同時引入 main.css 和 normalize.css 可能會互相干擾，不易進行 debug 與維護
- 沒有變數
- 現在有 CSS Variable
- 沒有辦法組合

因此 CSS 預處理器就誕生了，讓我們能夠以寫程式的方式處理樣式，方便進行維護。


### 什麼是 SASS？

#### [SASS（Syntactically Awesome Stylesheets）/ SCSS](https://sass-lang.com/install)
- 是 CSS 預處理器，能更有結構撰寫程式碼，方便後續維護
- 適合大型專案使用
- SASS 無大括號；SCSS 有，因此後者和 CSS 相容
- CSS 預處理器需另外編譯成 CSS，瀏覽器才能看得懂
> 【註】[SAS（Statistical Analysis System） / SPSS](https://www.sas.com/zh_tw/home.html)：統計分析系統，用來進行數據分析的軟體

### SASS 提供的功能

- 參數與結構化 CSS
- Nesting：巢狀語法
- Variables：變數設定
- 模組化 CSS
- Import
- Extend
- Mixin
- Functions
- 自動化 CSS
- Condition
- Loop

### 相關語法

- 安裝 Sass

`npm install -g sass`：`-g` 表示在全域安裝

- 一次性編譯

`sass main.sass main.css`：將 main.sass 檔編譯成 main.css

- watch 模式

`sass --watch main.sass main.css`：每次存檔均會自動進行編譯

- 壓縮功能

`sass --style=compressed mais.sass main.css`：通常是在開發最後才會執行

## Sass 實作補充

main.css 通常由下列要素組成：
1. utils：整理出常用的 variables（背景顏色等）和 mixins（垂直至中、對齊等樣式功能）
2. Components：整理跨頁元件
3. Layouts：獨立的大元件
4. Pages
5. 其他樣式：themes（dark mode）、vendors（bootstrap css）

### 巢狀與變數

1. 巢狀語法：注意 `&` 前的空格

.section
  width: 100%
  height: 50%
  border-bottom: 1px solid #000
  padding: 2rem
  &__title
    text-align: center
  &__wrapper
    display: flex
    justify-content: center
    align-items: center

編譯結果：

.section {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #000;
  padding: 2rem;
}
.section__title {
  text-align: center;
}
.section__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*# sourceMappingURL=main.css.map */

2. 變數設定：使用 `$` 來命名

$primary: #0047AB
$secondary: #4D80E6
$warning: #CD5C5C
$text:#CCCCFF
$background: #eeeeee

.color
  width: 50px
  height: 50px
  margin: 10px
  background: #000
  &-primary
    background: $primary
  &-secondary
    background: $secondary
  &-warning
    background: $warning
  &-text
    background: $text
  &-background
    background: $background

編譯結果：

.color {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: #000;
}
.color-primary {
  background: #0047AB;
}
.color-secondary {
  background: #4D80E6;
}
.color-warning {
  background: #CD5C5C;
}
.color-text {
  background: #CCCCFF;
}
.color-background {
  background: #eeeeee;
}

/*# sourceMappingURL=main.css.map */

### 模組化 CSS

#### `@import`：引入檔案，用來分別進行管理
- 例如：將變數放到 `_variables.sass` 統一管理，然後在 `main.sass` 加上 `@import _variables.sass` 即可引入檔案

#### `export`：繼承，處理共同樣式
- 使用時機：可將所有相同樣式的內容合併，減少重複的行為
- 例如：`<a>` 統一去除底線、制定 template

%btn
  padding: 1rem 2rem
  color: $background
  font-size: 1rem
  margin: 1rem
  transition: .1s

.btn
  &-primary
    @extend %btn
  &-secondary
    @extend %btn
  &-waring
    @extend %btn

編譯結果：

.btn-waring, .btn-secondary, .btn-primary {
  padding: 1rem 2rem;
  color: #eeeeee;
  font-size: 1rem;
  margin: 1rem;
  transition: 0.1s;
}

#### `mixin`：打包常用功能，替換局部變數

- 使用時機：用於需重複使用到的屬性，且可帶入變數，以進行微調
- 例如：width、height、flex-center 等

@mixin btn
  padding: 1rem 2rem
  color: $background
  font-size: 1rem
  margin: 1rem
  transition: .1s

.btn
  &-primary
    +btn
  &-secondary
    +btn
  &-waring
    +btn

編譯結果：

.btn-primary {
  padding: 1rem 2rem;
  color: #eeeeee;
  font-size: 1rem;
  margin: 1rem;
  transition: 0.1s;
}
.btn-secondary {
  padding: 1rem 2rem;
  color: #eeeeee;
  font-size: 1rem;
  margin: 1rem;
  transition: 0.1s;
}
.btn-waring {
  padding: 1rem 2rem;
  color: #eeeeee;
  font-size: 1rem;
  margin: 1rem;
  transition: 0.1s;
}

#### `function`：可回傳數值，搭配變數和 mixin 使用
- 與 `@mixin` 的不同之處，在於 `@function` 只會回傳一個值，而 `@mixin` 是回傳一段CSS程式碼

### Sass 自動化

#### loop 迴圈

- 使用 `@each` 搭配 array
- 以逗號表示 `center, start, end`

$direction-types: center, start, end

@each $type in $direction-types
  .flex-#{$type}
    display: flex
    justify-content: $type
    align-items: center

編譯結果：

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: end;
  align-items: center;
}

- 使用 `@each` 搭配 map
- 在括號以 `參數:值` 表示 `(center: center, start: flex-start, end: flex-end)`

$direction-types: (center: center, start: flex-start, end: flex-end)

@each $type, $value in $direction-types
  .flex-#{$type}
    display: flex
    justify-content: $value
    align-items: center

編譯結果：

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

- for 迴圈
- 使用時機：用於預先設定，或特效網站需產生密集大小值

@for $i from 0 through 5
    .h#{5 - $i + 1}
        font-size: 1 + 0.2rem * $i

編譯結果：

.h6 {
  font-size: 1rem;
}

.h5 {
  font-size: 1.2rem;
}

.h4 {
  font-size: 1.4rem;
}

.h3 {
  font-size: 1.6rem;
}

.h2 {
  font-size: 1.8rem;
}

.h1 {
  font-size: 2rem;
}

#### condition

有關 Flow Control 可參考[官方文件](https://sass-lang.com/documentation/at-rules/control/for)。

參考資料：
- [Sass/SCSS 基本語法介紹，搞懂CSS 預處理器](https://tw.alphacamp.co/blog/css-preprocessor-sass-scss)
- [常用色彩表](http://www.ebaomonthly.com/window/photo/lesson/colorList.htm)
- [SCSS 筆記(2) - extend、mixin、function](https://icguanyu.github.io/scss/scss_2/)

### 重構檔案流程

- 步驟一：將重複的部分用巢狀方式撰寫
- 步驟二：將顏色、字體大小，統一使用變數命名 `_variables.sass`
- 步驟三：抽檔案，把重複的區塊放到 `_components.sass`
- 步驟四：將分出的區塊以 `@import` 引入，完成後將所有檔案打包

---

## BABEL：JS 轉譯器

[BABEL](https://babeljs.io/) 是 JavaScript 轉譯器，可將 ES6+ 程式碼轉為等效的 ES5 程式碼。

參考資料：[利用 Babel 支援現代 JavaScript 的特性](https://michaelchen.tech/javascript-programming/babel/)