# 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
加入以下code
```
//設定格式與路徑
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".css",
"savePath": null
}
],
//不產生source map
"liveSassCompile.settings.generateMap": false,
```
寫好sass或scss後，按下vs code下面的"Watch Sass"
他就會自動在sass當幫邊建立一個編譯好的css檔，並在修改sass時，自動編譯。
---
### 接下來介紹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檔名';
```
---
## '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}，用於在字串中加入變數。
---
Sign in with Wallet
Connect another wallet