# Sass

###### tags: `程式導師` `sass`

**為何使用 sass**

為了解決 css 重複撰寫、程式碼互相干擾、不易管理變數的問題。sass 需要透過預處理器編譯成 css，網頁才看得懂。

- sass 檔案內可同時支援 Sass 與 Scss。
- 跟 scss 最大的差別在於沒有 `{ }`、`;`，所以縮排要正確，不然容易編譯錯誤。

**sass 三大功能**

1. 變數與結構化 css：nesting, variables
2. 模組化 css：import, extend, mixin, fnctions
3. 自動化 css：condition, loop

**編譯方式**

1. 在專案資料夾內 `sass main.sass main.css`，自動產生 css 檔案。(同時也會有 main.css.map，協助對應 sass 跟 css 程式碼)
2. 啟動即時更新 `sass --watch main.sass main.css`，儲存 sass 檔案後，會自動更新 css 檔案內容。
3. 完成專案後壓縮 `sass --style=compressed main.sass main.css`。

## sass 變數與結構化

// 使用變數
$primary: #000000;

// 巢狀
.section
  color: $primary
  &_title
    background: $primary
  &_wraper
    background: $primary

在 css 的編譯結果：

.section {
  color: #000000;
}

.section .section_title {
  background: #000000;
}

.section .section_wraper {
  background: #000000;
}

## sass 模組化

為了方便管理量大的 sass，所以會拆解檔案。就像是 js 中把不同 function 寫在不同檔案內，要用到時再引入。

### import 引入

// 在 _variables.sass
$primary: #000000;
$secondary: #00ffff;

// 在 main.sass
@import _variables.sass

.section
  color: $primary
  &_title
    background: $primary
  &_wraper
    background: $secondary

### extend

模板管理概念，從基本的模板發展出其他樣式。

// 設定模板
%btn
  padding: 1rem 2rem
  color: #000fff
  
// 引入模板
.btn
  &_primary
    @extend %btn
  &secondary
    @extend %btn

### mixin

// 設定模板
@mixin btn
  padding: 1rem 2rem
  color: #000fff

// 引入模板
.btn
  &_primary
    +btn
  &secondary
    +btn

extend 跟 mixin 的效果相同，差別在「編譯結果」。且 mixin 可以帶變數。
因此推薦使用 mixin 的時機是

- 元件在共同樣式下，需要微調樣式
- 常見的功能，例如垂直水平置中

/*extend 的 css 編譯結果（不同 class 的樣式寫在一起）*/
.btn {
  padding: 1rem 2rem;
  color: #000fff;
}

.btn_primary, .btn_secondary {
  padding: 1rem 2rem;
  color: #000fff;
}

/*mixin 的 css 編譯結果（不同 class 的樣式分開寫）*/
.btn {
  padding: 1rem 2rem;
  color: #000fff;
}

.btn_primary {
  padding: 1rem 2rem;
  color: #000fff;
} 

.btn_secondary {
  padding: 1rem 2rem;
  color: #000fff;
}