# SASS筆記
這個方法Chris不推薦，請參閱npm裝法
~~# 安裝sass環境
安裝延伸模組：Live Sass Compiler

安裝完就可以在專案中建立`.sass/.scss`，他就會額外編出一支`.css`，若在.`sass/.scss`開頭加上底線 _ 則不會建立`.css`~~

---

~~建立檔案的格式、位置、副檔名等可以到setting.json去設定~~

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css/"
    }
],

~~* format
`expanded`:不壓縮，較易閱讀
`compressed`:去除所有空格及縮排，體積小，較適合專案上線~~

~~* extensionName
通常用`.css`或是`.min.css`~~

~~* savePath
`null`:與.sass/.scss相同路徑
`/`：絕對路徑，從根目錄開始
`~`：相對於.sass/.scss本身，也就是從自己本身的目錄開始~~~~

---
~~建立sass/scss檔案後，點擊vscode下方的Watch Sass後存擋就會自動編譯~~

# Sass寫法
# @Mixin
先mixin有重複性的定義，再將定義include進去

---
也可以用參數定義

---
# @Extend
先定義共用的style，再將它extend，編譯結果會將他們extend的style組成group

---

# 運算符
(+)、(-)、(*)、(/)
數字可以做一些運算，運算子兩邊要空格以避免有些狀況系統無法識別符號


---
單位之間運算要注意：
* 絕對單位與相對單位無法運算
* 相對單位之間無法運算
* 絕對單位除了(*)以外都可以運算（應該吧？），試想"兩個人乘上三個人"是什麼意思，有意義嗎？

---

# @Import
將`<url>`內容載入到檔案中，這是原生css就有的語法
例如將所有scss當整合成一支檔案，例如all.scss

這個用法編譯後會有重寫的問題，可能同一個class會寫超過兩次，造成css會有過多不必要的code，浪費空間影響效率，現在@use可以取代之，也解決重寫問題

---

# @use
用法跟@import類似，但這個機制還沒有很了解，目前只知道要引用其他檔案的變數最後面要加上`as *`
舉例來說，我寫了一個color.scss並在裡面放了會用到的顏色變數

在media_icon.scss要使用這些變數
在最前面寫：
`@use "../uitilties/color" as *;`
就可以在下方使用變數了{color: $dark; color: $green;}
（中間mixin可以先忽略）

# 關於分檔
[季芳都看這個](https://sass-guidelin.es/#the-7-1-pattern)

# Chris的書
我直接截圖有關Sass的內容了

大致的重點就是：
* 語法要會用，觀察編譯前後，推理運作原理
* 預處理器（前置處理器）是做什麼的
* 程式語言盡量交給後面的javascript，Sass就做css的事就好