SCSS 重點筆記
每翻文件都有新發現
之前寫 scss 用到的功能並不多，都是有需要用到什麼，再去 google 什麼，學的非常零碎，趁今天看了幾篇文章和影片的簡易教學，又 wow 的有新發現的同時，順手把重點整理一下。
變數 (Variable) $
用 $ 符號宣告變數，常用在設定顏色，字型大小等，變數編譯後不會輸出在css 檔案中。
匯入 (Import) @import
匯入其他 scss 的檔案，要用 @import，撰寫 scss 時，通常會模組化管理非常多的檔案，統一匯入最終的scss，再編譯成 css，要被匯入的檔案，檔名前面會加一個下底線( _ )，e.g. _reset.scss ，這樣編譯工具會自動略過有下底線的檔名，不直接編譯。** 匯入時不用寫下底線
繼承 (Extend) @extend
有很多 css 樣式需要重複使用，就可以用繼承，語法是 @extend，可以在繼承的 css 前加入 % 符號，只有被繼承的 css 會被編譯，原 extend 語法不會被譯出，% 表佔位符，所以套用 % 繼承的樣式位置在檔案中會往前提升， 繼承同一個 css 的 class，編譯出的內容會放在一起。
- 補充 1 - - !optional
如果故意 extend 不存在的樣式名稱，則會編譯出錯， 加上「!optional」修飾詞，以表示當 extend 不存在樣式名稱時，則不做 render。
- 補充 2 - - @extend in @media
在 @media 範圍裡面使用 @extend 呼叫指定樣式名稱時，該樣式名稱不能放在 @media 範圍之外，否則會出錯， 應該把該樣式名稱放在 @media 範圍裡面才行。
函式 (Function) @function
- 內建函式，像是顏色變亮 (ligten) 或是變暗 (darken)...
- 自訂函式，可以帶變數做簡易計算
(以下範例把頁面字體大小的單位都從 px 換算成 rem)
混用 (Mixin) @mixin
像是 extend 與 function 的綜合體， 需搭配 @include 使用， 以前常用於 css3 在各瀏覽器上解決前綴詞的問題，但近期大部分的css3都已不需前綴詞即可支援語法 e.g. transform
Mixin 跟 extend 最大的不同 →
Mixin 是產生多個樣式；extend 是將樣式全部集中管理。
@content - Mixin 的延伸，可搭配 media 使用
把 media query 寫在 mixin.scss 模組管理的檔案下，不用死記一長串 @media screen and (max-width: xxx)...的語法，在不同專案也可以重複使用，非常便利。
參考資料：
文章 --
SCSS 15分鐘入門
從 CSS 到 SASS (SCSS) 超入門觀念引導
SCSS語法 — @import、@media、@extend
Day23 學習 scss 時的那些大小事
影片 --
六角學院 — SASS 之 @function、@extend、@mixin
