---
# System prepended metadata

title: 'Sass, SCSS'
tags: [CSS, preprocessor]

---

# Sass, SCSS
###### tags: `CSS` `preprocessor`
> **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 |

### 環境架設
- Ruby
- node.js
- vscode 外掛

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

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

:::spoiler **外掛細節設定**
```json=
// 在 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
##### `>` 
```sass=
// 相當於 button > h1 (直接選到 h1)
button {
    > h1{
        color: red;
    }
}
``` 
##### ` `
```sass=
// 相當於 button h1
button {
    h1{
        color: red;
    }
}
``` 
##### `&`
```sass=
button {
    // 相當於 button:hover
    &:hover { color: green; }
    
    // 雖然使用 & 也可以抓取到 但取用的權重會與父元件同級
    // 相當於 .button h1
    & h1{  
        color: red;
    }
}
```




#### 變數 Variable
> 以 `$` 定義一個變數，方便識別與重複使用。
```sass=
// 定義變數
$yellow: #F2C72D;
$blue: #66D1F2;

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

.buttonA{
    backgroung-color: $yellow;
}
.buttonB{
    backgroung-color: $blue;
}
```
#### 繼承 Extend
> 取用一模一樣的設定。
```sass=
// 也可以寫成 .button{...} 但這樣編譯的時候就會多出來。
%button{
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

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

// 相當於
// .myButton, .yourButton{...}
```
#### 混用 Mixin
> 類似 extend ，但可以傳入參數，用法更彈性。 `@mixin`
```sass=
// 定義 mixin
@mixin size($W,$H){
    width: $W;
    height: $H;
}

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

// 相當於
// .box1{...}
// .box2{...}
```
#### 函式 Fuction
> 用來做計算的。 `@function`
```sass=
@function Line($count: 1){
  @return $baseLineHeight * $count;
}

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

// 組合技 // 判別式 @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;
  }
}
```
#### 模組 Module
> 模組檔案名稱前加 `_` （該檔案不會被編譯成 css）

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

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

```scss=
/** in style.scss **/ 
@import "setting"
```
##### @use
> 引入參考，減少變數名稱衝突的問題。

```sass=
/** in style.scss **/ 
@import "setting"

.box{
    // 指定實際引用變數
    background: setting.$primary-color
}
```
### 運算符
> ~~calc~~ 👋 (可以不用管有些瀏覽器不支援 calc 的問題了)
[sass不同單位的運算符](https://ithelp.ithome.com.tw/articles/10204038)
```sass=
$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)