---
# System prepended metadata

title: 初探SASS
tags: [SASS]

---

###### 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
```htmlembedded
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
```
css
```htmlembedded
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
**利用關鍵字"$"設定變數使用。**

![](https://i.imgur.com/mwkD5Ty.png)

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

![](https://i.imgur.com/mizoxgV.png)


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

![](https://i.imgur.com/WMs4iCQ.png)

## 03-operation
 ![](https://i.imgur.com/cTZmcBi.png)
* 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 %
   ![](https://i.imgur.com/nl0VKv2.png)

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

* 圖片取代文字
  ![](https://i.imgur.com/wngJpab.png)
  

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


![](https://i.imgur.com/OPFDern.png)

![](https://i.imgur.com/BJg8Uyo.png)


### 分類
從上到下編譯
![](https://i.imgur.com/d2LV0pa.png)


## 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檔**
![](https://i.imgur.com/CULNy82.png)


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

****import是有順序性的，例如:記得變數要放面**
基本是順序為:變數=>reset=>main
![](https://i.imgur.com/H7Wh2rR.png)


## OOCSS

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

![](https://i.imgur.com/HTtdSiV.png)

> 工具類樣式

![](https://i.imgur.com/PSR4hwg.png)



2. 容器與內容分離

![](https://i.imgur.com/VwfHSVi.png)

* 以格線系統為例





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




