###### tags:`SASS`

# 初探SASS

### 甚麼是Sass?
Sass是一個最初由Hampton Catlin設計並由Natalie Weizenbaum開發的層疊樣式表語言。在開發最初版本之後，Weizenbaum和Chris Eppstein繼續通過SassScript來繼續擴充Sass的功能。SassScript是一個在Sass檔案中使用的小型手稿語言。[維基百科](https://zh.wikipedia.org/wiki/Sass)。sass是巢狀式CSS，需經編譯後成css才可使用。[Sass官方網站](https://sass-lang.com/)。

**scss(有大括號)與sass的寫法不同。**

**NVM**
* node.js是把js拿去寫後端的環境。而nvm是node.js的版本管理工具。
* 通常會使用nvm來安裝node.js而不會從官網直接安裝。
* 到nvm的gitHub下載安裝。
* 可至命令提示字元輸入"nvm -v" 確認是否安裝成功(若成功會出現版本號)。

**NVM指令**
* nvm list：查看已安裝的版本
* nvm list available：查看有哪些 Node 版本可以裝
* nvm install 版本號：安裝指定的 Node 版本(LTS)
* nvm use 版本號：指定 Node 版本

**VSCode套件列表**
* liveSassCompile:及時編譯sass檔案成css。
* Sass
* Monokai Dark Soda:色彩主題。
* EaseServer:server環境。(使用:ctrl+shift+enter)
* colorize:寫顏色的時候直接會出現顏色。
* AutoFileName
* vscode-icons

**Live Sass Compiler Setting**

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
    }
],
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 5 versions",
    "Firefox >= 45",
    "iOS >=8",
    "Safari >=8",
    "ie >= 10"
]

## 00-嵌套nesting
**在sass中可以像寫程式一樣一層層包起來，省去不需要的重複撰寫。**

scss

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

## 01-variable
**利用關鍵字"$"設定變數使用。**


## 調出想要的顏色:darken/lighten
sass內建功能:
darken(顏色,百分比)=>深多少
lighten(顏色變數,百分比)=>亮多少


## 02-select
**利用關鍵字"&"往上一層查找。**


## 03-operation
* sass可以進行加減乘除運算。
* 類calc功能，calc偏動態會一直重新render，sass是靜態編譯成css。
* 小地方特別注意:
1. 除法要刮號。
2. 也可以用變數($width:1000px，只有變數不需要括號) $width/3
3. (100%/3)
4. 5px + 10px / 3
5. $width / $num (**給除的等分不能帶單位!!!**)
6. 50px/3px =>失敗 (50px/3px) =>16.6666667(會除但不帶單位)
7. $width(50px) / $num(3px) =>16.6666667(會除但不帶單位)

## 04-extend(共用) (% => @extend%)
**%xxx**
**@extend %xxx**

用 % 把共用的樣式拉出來寫在一起(可想成一個空間)
使用時用 @extend %

## 05-mixin(@mixin => @include)
可以動態帶參數去改變
@mixin boxSet($bgColor:red)
@include boxSet(blue)
使用時不帶參數則會用預設的，如果沒有預設也不帶參數，則會壞掉編譯不出來。也可以帶多個參數。


* 圖片取代文字

## 核心語法@mixin+content(響應式)
@content會顯示大刮號的內容



### 分類
從上到下編譯

## 06-fuction(@fuction => @return)
@fuction pxToVw($px){
@return $px * 100 / 1366 +vw;
}

範例:在1366解析度下要px的大小，寫成函式。計算每個解析度下維持此比例(vw單位)。**( $px * 100 / 1366)**

font-size:pxToVw(16);

這邊實作一個指數函式 pxToVw()，可以看到語法是以 @function 為開頭加上函式名稱及參數，概念與一般寫程式一樣，甚至也可以用 for 迴圈、if/else 判斷式，最後將結果值 return 給呼叫這個函式的地方。

## 07-MediaQueries/rwd
以往我們會把很多不同的區塊寫在同一個media裡面
$mq1024:1024px;

@media screen(max-width:$mq1024){
.header{}
.section{}
.asdide{}
.footer{}
...
}
這種方式當檔案很大的時候會難以維護。不好查找。
所以可以利用sass嵌套特性，將media寫在巢狀中，以"區塊"的不同做區分，將來會比較好維護。

.header{
@media screen(max-width:$mq1024)
}
.section{
@media screen(max-width:$mq1024)
}
.asdide{
@media screen(max-width:$mq1024)
}
.footer{
@media screen(max-width:$mq1024)
}

## 08-模組化 import
分類的方式建議為以下:
1 public資料夾(給全域使用的) _reset.scss/_mixin.scss/_variable.scss
2 modules資料夾(拆區塊) _header.scss/_article.scss/_footer.scss

**用一支main.scss檔案，把scss檔案模組化 @importe(匯入) 所有_scss =>產生一隻css檔**

加底線的檔案SASS會判斷他是模組，不會bundle他，有底線_的是專門拿來import用的。

****import是有順序性的，例如:記得變數要放面**
基本是順序為:變數=>reset=>main

## OOCSS

1. 結構與樣式分離
* 結構:大小
* 樣式:陰影、背景顏色...


> 工具類樣式


2. 容器與內容分離


* 以格線系統為例

## 其他教學資源分享
* [SASS超入門與RWD](https://www.youtube.com/watch?v=Kp7B_3TrQjg)
* [Mike老師 gitHub資源](https://github.com/MikeCheng1208/SassLiveExample)