---
# System prepended metadata

title: Sass

---

# Sass 
###### #css #sass #scss #live sass
Sass是個進階的css，可以算是一種css框架。
可以使用更多人性化的寫法，所以比css更好寫好懂。
也可使用變數、function、if等，使css能做更多操作。

要知道html是不能直接讀取sass的，必須藉由編譯器轉換成css。

Sass跟SCSS基本上是一樣的東西，只是寫法不同，Sass不用加{}，而SCSS要。
所以習慣寫css的人可直接寫SCSS，比較相似於css。

---
## 編譯Sass
### 1.安裝vs code插件"Live Sass Compiler"
### 2.調整設定
到設定搜尋live sass
點選第一個edit in setting.json
![](https://i.imgur.com/WNGNfs8.png)
加入以下code
```
//設定格式與路徑
"liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".css",
      "savePath": null
    }
  ],
 //不產生source map
 "liveSassCompile.settings.generateMap": false,
```
![](https://i.imgur.com/bDPUW7D.png)
寫好sass或scss後，按下vs code下面的"Watch Sass"
他就會自動在sass當幫邊建立一個編譯好的css檔，並在修改sass時，自動編譯。
![](https://i.imgur.com/qBuHWD6.png)


---
### 接下來介紹Sass的各種功能:

## 可使用縮排
在sass裡可用縮排來表示子物件
一般css:
```
.container{
    ...
}
.container .card{
    ...
}
.container .card h1{
    ...
}
.container .card p{
    ...
}
```
Sass:
```
.container{
    ...
    
    .card{
        ...
        
        h1{
            ...
        }
        p{
            ...
        }
    }
}
```
### '&'的用法
'&'為父物件的簡寫
Css:
```
.container{
    ...
}
.container:hover{
    ...
}
.container.card{
    ...
}
```
Sass:
```
.container{
    ...
    
    &:hover{
        ...
    }
    &.card{
        ...
    }
}

```


## 可分割Sass成多個檔案
在sass檔名前加一個下底線'_'可以不被編譯成新的css檔 
例如:
```
_config.scss
```
然後再在主要的sass裡加上
```
@import 'sass檔名';
```
![](https://i.imgur.com/QHXSNXi.png)
![](https://i.imgur.com/t6ePWbg.png)


---
## 'Extend'的用法
Extend可以使sass中會重複用到的地方直接引用，有點現變數的概念，直接來看例子。

假設我們有很多按鈕，而基本的樣式是一樣的，但只有背景和字顏色要換，這時就可以用@extend來繼承一般按鈕該有的樣式，再自行加上要修改顏色。
```
button{
    display: inline-block;
    padding: 10px;
    margin: 5px;
}
.btn-primary{
    @extend button;
    background: #fff;
    color: #111;
}
.btn-secondary{
    @extend button;
    background: #fefefe;
    color: #333;
}
```


---
## 顏色調整功能
sass有多種function方便使用者直接修改顏色明暗度、飽和度等。
### 1.Darken & Lighten 明亮度
```
lighten($color, $amount)
//Makes a color lighter.
darken($color, $amount)
//Makes a color darker.
```
例如: 提高紅色10%亮度
```
lighten(red, 10%)
```
### 2.Saturate & Desaturate 飽和度
```
saturate($color, $amount)
//Makes a color more saturated.
desaturate($color, $amount)
//Makes a color less saturated.
```
例如: 提高紅色10%飽和度
```
saturate(red, 10%)
```
### 3.Grayscale 灰階
將顏色調整為灰階，調整為灰階明度是不會改變的
```
grayscale($color)
//Converts a color to grayscale.
```
### 4.Complement 互補色
轉成互補色
```
complement($color)
//Returns the complement of a color.
```

更多詳細語法:https://wcc723.github.io/sass/2013/08/26/sass-hsl-funtion/

### 用function讓文字依照背景量度調顏色
首先建立function:
```
@fuinction set-text-color($color){
    //假設input顏色亮度大於70，回傳黑色，else回傳白色
    @if(lightness($color) > 70){
        @return #111;
    }@else{
        @return #fff;
    }
}
```
使用function:
```
$gb-color: #111
.container{
    backgroung: $gb-color;
    color: set-text-color($gb-color);
}
```
---
## 使用@mixin來簡化sass
@mixin的用法跟@function很類似，差別只在於@mixin沒有回傳值，只會單純執行裡面的功能。
假設我們每次改背景顏色就要順便改文字顏色，這時就可用@mixin將這兩行合併起來。
建立mixin:
```
@mixin set-bg-text($color){
    backgroung: $color;
    color: set-text-color($color);
}
```
使用mixin:
```
$gb-color: #111
.container{
    @include set-bg-text($bg-color);
}
```


---
## 使用loop
sass也有類似for迴圈的功能
假設我們有class: m1, m2, m3, m4, m5
每個class都有參數要微調
Sass:
```
$sapceamount: (1,2,3,4,5)
@each $space in $spaceamount{
    .m#{$space}{
        margin: #{$space}rem;
    }
}
```
Css:
```
.m1{
    margin: 1rem;
}
.m2{
    margin: 2rem;
}
.m3{
    margin: 3rem;
}
.m4{
    margin: 4rem;
}
.m5{
    margin: 5rem;
}
```
#{var}類似於js裡的${var}，用於在字串中加入變數。


---
