N1.1_Sass 實作補充_CSS 預處理器

[FE201]_Sass 實作補充 by minw

Sass 簡介與安裝

CSS 開發上的問題：

1. css 是全域的，會互相干擾：例如 normalize.css 會影響 main.css

2. 沒有變數（但現在有 css variable）：有變數比較方便做管理

3. 沒有辦法組合：維護上很麻煩

為什麼要有 css 預處理器？

透過撰寫類似 css 的語言，利用預處理器編譯成瀏覽器看得懂的 css

css 後處理器是什麼？

加工既有的 css

css 預處理器跟後處理器只是使用上流程的差別而已，這兩個可以同時使用。

Sass 介紹

有三大類功能：

1. 參數與結構化 css: nesting, variables

2. 模組化的 css: import, extend, mixin, functions

3. 自動化 css: condition, loop

Sass 怎麼用？

雖然編譯器名稱叫做 Sass，但它支援了兩個語法，SCSS 跟 Sass

有人覺得 SCSS 比較嚴謹，不會因為縮排容易有問題，所以可能會用在大型專案上。

在小型專案裡面，用 Sass 比較多。

開發完以後，想要壓縮 css，可以用 sass --style=compressed file1.scss file2.css，不必要的空行縮排都會不見

Sass 結構化 - 變數與巢狀

Sass 模組化 - import, extend, mixin 與 function

import：通常會開一個檔案叫做 _variables.sass 管理變數，接著把這個檔案引入到 sass 裡面，開頭寫上 @import _variables，要加不加副檔名都可以

extend：

可以用 % 先寫好一個模板：

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

mixin：很類似 extend

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

mixin 與 extend 的區別，mixin 可以帶變數，更像函式的感覺；或者把一樣常見的功能包起來（例如垂直水平置中之類的）；更好的做法是開另外一個檔案 _mixin.scss

function 可以回傳數值，跟 mixin 有點像；fn 有執行順序的特性，所以記得要放在「想要引入對東西」的前面

mixin 可以用在一整組的功能底下；function 可以只用在一個功能底下

Sass 與 CSS 渲染規則

回顧 mixin 與 extend 語法上的區別

Sass 自動化 - condition 與 loop

有類似 arr or obj 的資料格式：

arr: 在這裡叫做 lists

//  arr 前面寫一個變數，後面用逗號隔開
$sizes: 40px, 50px, 80px;

//  這是用類似迴圈的概念生成下面的 css
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

//  編譯之後會長這樣
.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

obj 在這裡叫做 maps，如果想要用多個變數搭配的話，可以用 @each + maps 的形式

如果對這個有興趣的話，可以去看官網的 flow control

Sass 實戰

主要講重構 css 流程

推薦每個頁面獨立打包成一個 css 檔案比較好

要記得每做一小個階段，就檢查網頁有沒有錯誤喔

會被 import 進來的檔案，檔名前面習慣加上底線