# Sass 語法

## TL;DR

這份筆記主要用來記錄 Sass 的語法，之前並沒有系統性的學習 Sass，只有在偶爾用到的時候查閱一下。希望透過這份筆記增加對 Sass 的理解，在專案開發時可以善用 Sass 的功能，讓專案的樣式規則更好維護與理解。

## 什麼是 Sass (Syntactically Awesome StyleSheet)

Sass 是 CSS 的語法擴充 (an extension of CSS3)，屬於 CSS 預處理器的一種 (Sass/SCSS 為最常見的一種)，需要被編譯成 CSS 後才能套用在 HTML 元素上。Sass 提高了 CSS 語法的 scalability, reusability, and maintainability。

Sass 有兩種語法

* 較新的 SCSS 語法，副檔名為 `.scss`
* 較舊的 SASS 語法，副檔名為 `.sass`

由於 SCSS 語法可以兼容 CSS 語法，所以也較被廣泛使用

## Sass/SCSS 基本語法 - 變數 Variables

在 Sass 中可以使用變數儲存 CSS 屬性值，相同的屬性就可以被重複套用，且方便修改。

### 定義變數

以 `$` 字號開頭，後面接變數名稱與 `:`，`:` 後接上要儲存到變數的屬性值。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

> #### CSS 語法結構
>
> CSS 樣式規則由兩個部分組成，**選擇器 (selector) 與聲明 (declaration)**
>

selector {declaration1; declaration2; ... declarationN }

>每個聲明由一個**屬性 (property) 與屬性值 (value)** 組成
>

selector {property: value}

## Sass/SCSS 基本語法 - 函數 Function

在 Sass 中可以使用函數來定義需要被重複利用的邏輯，相同的運算邏輯就可以被重複使用。Sass 中有提供內建函數也可以自定義函數。[內建函數參考](https://sass-lang.com/documentation/modules)

### 定義函數

@function {函數名稱}(${參數名稱}) {
...函數內邏輯
@return ${返回的變數名稱};
// 在每一條指令後要有 ;
}

實際定義函數並調用的例子

@function pow($base, $exponent) {
$result: 1;
@for $_ from 1 through $exponent {
$result: $result * $base;
// 注意不是使用等號
}
@return $result;
}

.sidebar {
float: left;
margin-left: pow(4, 3) * 1px;
}

在函數定義中有時會需要用到 statement 這種較高級的應用，關於 statement 的語法可以[參考這篇](https://www.ruanyifeng.com/blog/2012/06/sass.html)

## Sass/SCSS 基本語法 - 嵌套 Nesting

在 Sass 裡可以使用嵌套的結構來簡化 selector 與 property 的寫法

### 簡化 selector

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
}

會被編譯成

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

### 簡化 property

p {
border: {
// 注意要使用冒號 :
color: red;
}
}

會被編譯成

p {
border-color: red;
}

### 使用 `&` 引用父 selector

a {
&:hover { color: #ffb3ff; }
}

會被編譯成

a:hover {
color: #ffb3ff;
}

## Sass/SCSS 基本語法 - 混入 Mixins

在 Sass 裡可以使用 mixin 定義一段會被重複利用的樣式規則，這一段樣式規則還可以根據參數改變。

### 定義 Mixin 與引入 Mixin

以 `@mixin` 定義，以 `@include` 引入

// 不帶有參數
@mixin {mixin 名稱} {
width: 100%;
height: auto;
}

// 以 @include 使用 mixin
.avatar {
@include {mixin 名稱};
}

// 帶有參數
@mixin {mixin 名稱}(${參數名稱}) {
width: 100%;
height: auto;
}

// 以 @include 使用 mixin
.avatar {
@include {mixin 名稱}({參數值});
}

實際使用範例

@mixin square($size, $radius: 0) {
// 帶入參數或預設值
width: $size;
height: $size;

@if $radius != 0 {
border-radius: $radius;
}
}

.avatar {
@include square(100px, $radius: 4px);
}

* 變數 - 重複利用樣式規則裡的值
* 函數 - 重複利用樣式規則裡的運算邏輯
* Mixin - 重複利用樣式規則裡的一段樣式規則

## Sass/SCSS 基本語法 - 共用 Extends

在 Sass 裡可以使用 extend 定義一段會被重複利用的樣式規則，這一段樣式規則並不接受參數。

### 定義 Extend 與引入 Extend

以 `%` 為要重複利用的樣式規則命名，`{}` 內定義要重複利用的樣式規則。以 `@extend` 引入定義好的 extend。

%{extend 名稱} {
...要重複利用的樣式規則
}

{selector} {
@extend %{extend 名稱};
}

實際使用範例

%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}

.message {
@extend %message-shared;
}

### Extend 與 Mixin 的差別

Extend 與 Mixin 都可以用來重複利用樣式規則，但兩者編譯成 CSS 的方式不同。

* Mixin - 編譯後，重複的樣式規則會插入在每一個選擇器中
* Extend - 編譯後，將有共用樣式規則的選擇器集中管理

若想知道兩者編譯後實際的差異，可以[參考這篇文章](https://tw.alphacamp.co/blog/css-preprocessor-sass-scss)。實際使用上，當樣式規則需要重複利用但不需要隨著參數動態改變時使用 Extend，當樣式規則需要重複利用且需要隨著參數動態改變時使用 Mixin。

## Sass/SCSS 基本語法 - 引入模組 Import

Sass 支援模組化開發，透過 `@import` 引入不同的 Sass 檔案。

**Saas 會被編譯成 CSS 檔，但若在檔名前面加上 `_` 則不會被編譯出來。**實際模組化開發 Sass 時，通常只會有一個 Sass 檔案作為所有 Sass 檔案的統一載入點，只有這份 Sass 檔案會被編譯，所以其他 Sass 檔都以 `_` 開頭來命名，並以 `@import` 引入到統一的載入點中。

在統一個載入檔案裡可能會看到以下的開頭，可以發現這份樣式規則一共被切割為四個模組。

@import reset
@import layout
@import index
@import page

## Reference

[Sass/SCSS 基本語法介紹，搞懂CSS 預處理器](https://tw.alphacamp.co/blog/css-preprocessor-sass-scss)
[30天掌握Sass語法](https://ithelp.ithome.com.tw/users/20040221/ironman/562)