# CSS Preprocessor
###### tags: `css`、`css preprocessor`

## 簡介
簡單說就是用程式化的方式來寫 CSS，讓撰寫 CSS 的語法的時候比較有歸納性、好維護性。

常用的 CSS Preprocessor 有以下三套軟體：
1. SCSS/Sass
2. Less
3. Stylus

基本上每套的語法都差不多，只要會其中一套其它很快可以上手。

而 SCSS 和 Sass 可視為一套，差別只在於 Sass 的 CSS 語法沒有 `{}` 和 `;` 的符號，如下範例都是一樣的效果與結果：

#### Scss

.box {
    background: blue;
}

#### Sass

.box
    backgroud: blue

## Sass
接著下面的語法皆採用 Sass 這套軟體來熟悉 CSS Preprocessor。

### 安裝方式
可參考官網：https://sass-lang.com/install

我是採用 node.js 的 npm 套件來安裝，語法為：
`npm install -g sass`

#### 如何知道安裝成功
Sass：在 CLI 使用 `sass -v` 或是 `sass --version`

### 語法
#### Variables 變數

$brand-color: blue

.box 
  background: $brand-color


.list 
  background: $brand-color

使用`$`的符號作為變數的前綴符號來命名，而使用變數的好處就跟寫其它程式語言一樣，當我們需要使用這個變數就把這個變數呼叫出來，而在 CSS Preprocessor 的變數即為它所代表的 css 意思。

#### Compile 到 CSS 檔案
可以使用 `sass 'sass的檔案' 'css的檔案'` 語法，把在 sass 檔案打好的語法 compile 到 css 檔案裡去，非常地方便

像上面變數的例子，假設 sass 檔案叫做 index.sass；css 檔案叫做 index.css，就可以輸入`sass index.sass index.css`。而 index.css 的檔案內容就會變成下面這樣：

.box {
  background: blue;
}

.list {
  background: blue;
}

另外如果想要自動 compile 同步的話，可以輸入`sass --watch index.sass index.css`

### Nesting 巢狀
就是可以寫成階梯式那樣，外層會涵蓋所有內層的屬性，如下為 index.sass 的內容：

.box
  display: none
  .btn 
    width: 100px
    .text
      color: green
    .label
      font-size: 12px

compile 到 index.css 的結果：

.box {
  display: none;
}
.box .btn {
  width: 100px;
}
.box .btn .text {
  color: green;
}
.box .btn .label {
  font-size: 12px;
}

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

### Parent 父層
使用`&`的符號代替父層的名稱，如下範例為 index.sass 的內容：

$brand-color: blue

.card 
  background: $brand-color
  &__wrapper
    width: 100%
  &__list
    height: 100px

    &--disabled
      display: none

compile 到 index.css 的結果：

.card {
  background: blue;
}
.card__wrapper {
  width: 100%;
}
.card__list {
  height: 100px;
}
.card__list--disabled {
  display: none;
}

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

### Mixins
很像 function 的用法，把常用的結構放在 Mixins 裡，只要呼叫就可以一併呈現，以下為 index.sass 的內容：

@mixin border-radius($radius) 
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  -ms-border-radius: $radius
  border-radius: $radius

.card
  @include border-radius(10px)

`@mixin` 就是類似 function 的宣告，而 `border-radius` 則是這個 mixin 的名稱，`($radius)` 就像 function 的參數一樣。當要呼叫 mixin 則是輸入`@include mixin名稱(引數)`

compile 到 index.css 的結果：

.card {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

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

#### 也可以做四則運算：

@mixin border-radius($radius) 
  -webkit-border-radius: $radius*2
  -moz-border-radius: $radius*2
  -ms-border-radius: $radius
  border-radius: $radius

.card
  @include border-radius(10px)

compile 到 index.css 的結果：

.card {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

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

### _XXX.SCSS 的檔案應用
>_color.scss 它的檔名是以 _ 開頭，就是用來被匯入的css檔，裡面通常會是定義用於 scss 檔的變數，我們在這裡定義一些顏色。

#### 參考資料
1. [Webpack 實作入門2：打包 CSS / SCSS 與 加入 Bootstrap](http://www.mrmu.com.tw/2017/08/18/webpack-tutorial2-css-scss/)

#### 延伸資料
1. [你可能不知道的 Sass 技巧](https://medium.com/d-d-mag/%E4%BD%A0%E5%8F%AF%E8%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84-sass-%E6%8A%80%E5%B7%A7-c97d4d5e0fc4)
2. [30天掌握Sass語法](https://ithelp.ithome.com.tw/users/20040221/ironman/562)