CSS 習作｜Sass 入門學習資源，使用 VS Code 插件 Live Sass Compiler

本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。

👉🏻 文章上半段多為學習資源紀錄以及整理，下半段則紀錄使用 VS Code 插件來建立 Sass 環境，可依自己所需點擊目錄來閱讀文章。

Sass wiki 維基

Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Hampton Catlin 設計並由 Natalie Weizenbaum 開發的層疊樣式表語言。

Sass Basics

Sass 官方學習教程，可先閱讀以理解 Sass。

w3schools Sass Tutorial

• Sass stands for Syntactically Awesome Stylesheet
• Sass is an extension to CSS
• Sass is a CSS pre-processor
• Sass is completely compatible with all versions of CSS
• Sass reduces repetition of CSS and therefore saves time
• Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
• Sass is free to download and use

Sass 中縮排是語法的一部分，SCSS是巢狀元語言。

六角學院：SCSS 與 Sass 格式差異

圖片來源：https://courses.hexschool.com/courses/670032/lectures/11949492

1. SCSS 撰寫格式教學
2. Sass 撰寫格式教學
3. Sass 官方教學文章：Sass Syntax

六角學院：Sass 與 CSS 的不同之處

看完教程後，我繪製了瀏覽器與 Sass、CSS 之間的關係、運作流程：

Sass 需要轉譯為瀏覽器能讀懂的 CSS

1. 如上圖，因瀏覽器看不懂 Sass，因此需要透過轉譯將 Sass 轉譯成 CSS
2. 因此，開始撰寫 Sass 前，必須先安裝建立環境，使 Sass 能自動轉譯成 CSS
3. 開始撰寫時都寫在 Sass 檔案裡面，不會寫在 CSS 檔裡面，因為 CSS 檔案已經是由 Sass 編譯出來的結果。

Sass 學習乾貨

下面針對不同主題，將整理來的學習資源以相關性放在一起（盡量 XD），大多來自 w3schools 和六角學院，相關連結也一並記錄下來。

1. Why Use Sass

1. 減少重工負擔
2. 變數篇 - 整合相同設定好幫手
3. 運用 Sass 變數、管理樣式方法（ 利用變數管理重複設定值 ）
4. 補充筆記：參考這裡學習 Sass 知識
5. CSS 架構演化史 - 廖洧杰 | MOPCON 2020
6. Sass教學手冊導讀 Learn-Sass-in-90-days
7. sass-doc-zh （中文）

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.
Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

2. How Does Sass Work

A browser does not understand Sass code.
Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS. This process is called transpiling.（編譯、轉譯）
So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.

Transpiling is a term for taking a source code written in one language and transform/translate it into another language.

3. Sass File Type

Sass files has the ".scss" file extension.

4. Sass Comments

Sass supports standard CSS comments /* comment */, and in addition it supports inline comments // comment

sass 程式碼範例

5. System Requirements for Sass

• Operating system - Sass is platform independent
• Browser support - Sass works in Edge/IE (from IE 8), Firefox, Chrome, Safari, Opera
• Programming language - Sass is based on Ruby

------- 我是分隔線 -------

安裝 Live Sass Compiler

本篇下半段，將進入使用 VS Code 插件來建立 Sass 環境。

Live Sass Compiler

安裝 Sass 有不同種方式，可參考 Sass 官方文件安裝教學。

而在本篇筆記中，我則透過 VS Code 的插件來轉譯 Sass，這個插件為：Live Sass Compiler，或者可參閱以下安裝教學：

1. VS CODE 編譯 Sass 教學
2. 使用VSCode外掛自動編譯SASS/SCSS

安裝步驟：

1. 開啟 VS Code。
2. 在延伸模組上搜尋「Live Sass Compiler」。
3. 點擊藍色按鈕安裝，即可完成。

安裝 Live Sass Compiler

安裝結束後，重新開啟 VS Code ，可以在視窗下方的「藍色狀態列」上看到「Watch Sass」，表示有成功安裝了，如下圖：

如何使用 Live Sass Compiler 轉譯 Sass

我繪製了可能只有我自己看得懂的操作流程 XD

安裝成功後，接續以下步驟來運用 Live Sass Compiler 轉譯 Sass：

1. 在桌面上建立一個「project」專案資料夾，並在 「projects 資料夾內」建立一個「sass」資料夾，用來存放 scss 檔案。
2. 接著，我們在 scss 資料夾內新增一個 all.scss 檔案。
3. 開啟 all.scss 檔案，開始撰寫 Sass 語法。
4. 點擊「藍色狀態列」上的「Watch Sass」開始轉譯寫在裡面的 Sass 語法。
5. Live Sass Compiler 轉譯後自動新建了「css 資料夾」，裡面新增了已經轉譯的「all.css」、「all.css.map」兩個檔案，如下圖：

使用 Live Sass Compiler 轉譯 Sass 成 CSS

更改 Live Sass Compiler 存放 CSS 路徑

需特別注意的是，Live Sass Complier 預設情況下，編譯後不會自動新增資料夾，所以編譯後的檔案會和 all.scss 檔案放在同一個資料夾。
因此，如果希望另外產生資料夾來存放 all.css，需要手動更改存放路徑，操作流程如下：

1. Code > 喜好設定 > 設定 > 使用者 > Live Sass Complier > 在 settings.json 內編輯

2. 點擊在 settings.json 內編輯後，看見以下程式碼：

3. 在 settings.json 內加入以下語法，加入後如下圖所示：

,
    "liveSassCompile.settings.formats":[
        {
          "savePath": "/css"
        }
    ]

特別提醒 😮‍💨

剛開始建立完環境後撰寫 sass，隔天再度打開 VS Code，準備繼續寫 projests 的時候發現自己的東西大跑版、破版、樣式都沒有出現... 不斷確認自己哪裡出了問題，真的鬼打牆...就這樣一直卡了很久， 卡到快要瘋掉的地步，然後在一個熱到爆炸的時機點發現，好像是因為重新打開 VS Code 後，沒有再次按下「Watch Sass」，按下去後，東西都恢復正常了...

每次撰寫時要注意 Watch Sass 有沒有按！

也記錄一下其他可能會影響 Sass 無法正常運作的情況：

1. 沒有開啟「Watch Sass」。
2. 在 all.scss 檔案撰寫過程中，多打的文字或英文沒有記得註解，使得 sass 格式不正確。
3. 使用 sass 的語法錯誤，例如少打 「{ 」或 多打「 ; 」，等等使語法錯誤。

結語

練習練習練習練習練習練習練習練習...
走到這個階段，花了不少時間來初步瞭解 Sass，相信日後可以漸漸運用 Sass 更多強大的地方...加油。

Practice make perfect， 我是正在自我習作中的 Draw，我們下篇見 🙇🏻