# Sass, SCSS
> **S**yntactically **A**wesome **S**tyle**s**heets = SASS
:::info
**CSS 預處理器 (css preprocessor)**
<!-- 在開發大型專案時，許多網頁開發者開始發現傳統 CSS 有一些問題，像是樣式設定重複、可維護性差等缺點，於是開發者就開始思考若是能讓 CSS 像一般程式語言一樣，有變數、函式、迴圈等功能該有多好。 -->

- CSS 預處理器可以說是 CSS 語法的擴充，為了彌補 CSS 在大型專案維護性的不足，導入了一般程式語言的寫法，讓開發者可以更有結構地撰寫簡潔、清晰且好維護的 CSS 程式碼。
- 需要另外編譯成 CSS，瀏覽器才看得懂。
- 常見 CSS 預處理器有 Sass(SCSS), LESS。

:::

|| Sass | SCSS |
| ---- |-------- | -------- |
| 原型 | 類似 Ruby | 類似 CSS |
| 語法 | 嚴格縮排 | ； {} |
| 定義 | = | : |
| mixin | + | @include |

### 環境架設
> 由於 Sass/SCSS 是預處理器，會需要安裝套件將檔案轉換成 CSS 的檔案。以下環境套件供大家參考

- node.js（NPM） ➡️ sass-loader
- vscode ➡️ Live Sass Compiler


:::spoiler **Live Sass Compiler 細節設定**

// 在 vscode code/prefrences/settings 可以設定細節

"liveSassCompile.settings.formats": [
{
  "format": "expanded", //手寫樣式
  "extensionName": ".css",
  "savePath": "/style"
},
{
  "extensionName": ".min.css", 
  "format": "compressed",  // 壓縮
  "savePath": "/dist/style"
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
"> 1%",  // 瀏覽器市占率大於 1%
"last 2 versions"  // 最新的兩個版本
]

:::

### 功能語法
#### 巢狀 Nesting
##### `>`

// 相當於 button > h1 (直接選到 h1)
button {
    > h1{
        color: red;
    }
}

##### ` `

// 相當於 button h1
button {
    h1{
        color: red;
    }
}

##### `&`

button {
    // 相當於 button:hover
    &:hover { color: green; }
    
    // 雖然使用 & 也可以抓取到 但取用的權重會與父元件同級
    // 相當於 .button h1
    & h1{  
        color: red;
    }
}

#### 變數 Variable
> 以 `$` 定義一個變數，方便識別與重複使用。

// 定義變數
$yellow: #F2C72D;
$blue: #66D1F2;

// Sass 會使用 = 定義變數
// $yellow= #F2C72D

.buttonA{
    backgroung-color: $yellow;
}
.buttonB{
    backgroung-color: $blue;
}

#### 繼承 Extend
> 取用一模一樣的設定。

// 也可以寫成 .button{...} 但這樣編譯的時候就會多出來。
%button{
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

.myButton{
    @extend %button
}
.yourButton{
    @extend %button
}

// 相當於
// .myButton, .yourButton{...}

#### 混用 Mixin
> 類似 extend ，但可以傳入參數，用法更彈性。 `@mixin`

// 定義 mixin
@mixin size($W,$H){
    width: $W;
    height: $H;
}

.box1{
    // 引入 mixin
    @include size(100px,100px)
    
    // sass 以 + 引入mixin
    // + size(100px,100px)
}
.box2{
    + size(100px,100px)
}

// 組合技 // 判別式 @if @else
@mixin font($level: 1, $line-height: auto) {
  $size: font($level);
  $line: rhythm($size);

  font-size: $size;
  @if $line-height == auto or $line-height < $line {
    line-height: $line;
  } @else {
    line-height: $line-height;
  }
}

// 相當於
// .box1{...}
// .box2{...}

#### 函式 Fuction
> 用來做計算的。 `@function`

@function Line($count: 1){
  @return $baseLineHeight * $count;
}

.title{
    line-height: Line(2)
}

#### 模組 Module
> 模組檔案名稱前加 `_` （該檔案不會被編譯成 css）


##### @import
> 會導入檔案內全部內容

/** in style.scss **/ 
@import "setting"

##### @use
> 引入參考，減少變數名稱衝突的問題。

/** in style.scss **/ 
@use "setting"

.box{
    // 指定實際引用變數
    background: setting.$primary-color
}

#### 運算符
> ~~calc~~ 👋 (可以不用管有些瀏覽器不支援 calc 的問題了)
[sass不同單位的運算符](https://ithelp.ithome.com.tw/articles/10204038)

$box-width: 10rem ;

.box {
    width: $box-width;
    img {
        // 運算符前後都要有空格
        width: $box-width / 2;
    }
}	

#### 註解
> 應該都會選擇用 // 吧

| 註解寫法 | 說明 |
| -------- | -------- |
| // | 不會編譯到CSS檔內 |
| /** **/ | 會編譯到CSS檔內 |

### 🔥 看看大師怎麼寫
[官方文件](https://sass-lang.com/documentation)
[bootstrap](https://github.com/twbs/bootstrap/tree/main/scss)