# CSS 工具選擇

## PostCSS vs SASS

###### 優點
| SASS | PostCSS |
| ------------ | ------------ |
| 強大的功能 | 基於 JavaScript 的開箱即用 |
| 擴展 CSS，保持與 CSS 標準規範的兼容性 | 快速且靈活性高 |
| 可以自定義函式，並輕鬆調用。產生更清晰、更可重用的程式。 | PostCSS 允許您使用純 CSS 編寫，不用學習新語法 |

###### 缺點
| SASS | PostCSS |
| ------------ | ------------ |
| 需要 Ruby 或 LibSass | 插件通常基於不同的 postcss 版本，不能正常協同工作 |
| 提供的功能太多，compile 時間較長 | 有些插件需要按一定的順序運作 |

###### 實際需求
- 模組化樣式
- React / Vue / HTML /AEM 不同環境的應用性
- 取用的便利性
- 後續維護性（插件/版本差異）

## 結論：使用SASS
SASS 雖然需要較長時間的 compile，但較少版本問題，應用層面也較廣，能夠快速移植到不同的環境中，在 CSS 開發上也有助於釐清架構與維護。

未來可再根據需要規範 SASS 的架構與

---

## 什麼是SASS?

隨著網頁開發複雜度逐漸地提高，在開發大型專案時，許多網頁開發者開始發現傳統 CSS 有一些問題：

1. 沒有變數與可重複使用樣式的寫法
2. 模組化開發時，不能採用嵌套的寫法，需要寫很多重複的選擇器。

Sass 的**變數(variables)**、**語言嵌套(nested)**、**混合函式(mixin)**、**函式**等，並且完整的實現了表格形式。Sass 幫助複雜的樣式。更多條理，並輕鬆在項目內部或跨項目共享設計。

## 使用方式
### 安裝
在終端機輸入

在專案資料夾下建立一個 main.scss 的檔案，並且在該檔案的位置下終端機執行：

### 寫法

###### CSS

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
}

nav li a {
    text-decoration: underline;
}

###### Sass

nav
    ul
        margin: 0
        padding: 0
        list-style: none
    li
        display: inline-block
        
        a
            text-decoration: underline

### 引入方式
使用底線不會被編譯成 css 檔案，會在引入時被合併成一隻檔案

###### 檔案

_variable.sass
_mixin.sass

components/_button.sass

main.sass

###### main.sass

@import 'variable'
@import 'mixin'


@import 'components/button'

---

## SASS 的便利性

### 1. @variable

可根據設計稿，設定初始參數組合

$btn-config:(
	default:(
		class: 'default',
		color: #333,
		bg: #fff,
		border-color: #ccc
	),
	primary:(
		class: 'primary',
		color: #fff,
		bg: #009AFF,
		border-color: #009AFF
	),
	danger:(
		class: 'danger',
		color: #fff,
		bg: #D84315,
		border-color: #009AFF
	)
);

### 2. @mixin
設定共用樣式，與不同狀態的樣式設定

.btn{
    /*......*/
    &:hover,&:focus{
        color: #333;
        background-color: #e6e6e6;
    }
}

@mixin button-set($color,$background,$border-color){
    color:$color;
    background-color:$background;
    border-color:$border-color;
    &:hover,&:focus,&:active{
        color:$color;
        background-color:darken($background,5%);
        border-color:darken($border-color,5%);
    }
}

### 3. @each + @map

透過 @each 取得 variable 設定，並 mapping 到共用樣式

/* @each+map-get()+@include */
//$key,$value

@each $keyname, $value in $btn-config{
    $class:map-get($value,class);
    $color:map-get($value,color);
    $bg:map-get($value,bg);
    $border-color:map-get($value,border-color);
    
    .btn-#{$class}{
        @include button-set($color,$background,$border-color)
    }
}

###### HTML
未來只要修改參數設定、靠既有 **1** 組共用樣式與 **1** 個迴圈，就能產出各種需要的按鈕

<button class="btn">這是一個按鈕</button>
<button class="btn btn-primary">這是一個按鈕</button>
<button class="btn btn-danger">這是一個按鈕</button>

---

## SASS Guideline
[https://sass-guidelin.es/zh/](https://https://sass-guidelin.es/zh/)

## Reference
- [Sass vs PostCSS](https://www.slant.co/versus/764/767/~sass_vs_postcss)
- [https://sass-lang.com/](https://sass-lang.com/)
- [SASS教學 ＋SCSS：CSS 再進化，掌握語法攻略！](https://frankknow.com/sass-tutorial/)
- [SCSS/CSS 學習筆記](https://hackmd.io/@yuci0213/r17cT6NiL)