# Live Sass Compiler - VScode Extension 環境架設
#### 本次文章是寫給跟我一樣想要使用VScode當作編輯SASS & SCSS compiler的使用者，希望大家看完後能輕鬆地按照步驟架設環境。

### 前言
* CSS 本身是一款處理網頁排版以及美術效果的程式語言，但在撰寫大量程式碼時就開始會遇到一些問題。
>* 相依性過高：
只要有其中一層改變了就沒辦法使用了。（ex：li 變為 div）
>* DRY (Don’t Repeat Your CSS)
重複撰寫相同的樣式名稱。
>* KISS (Keep It Simple Stupid)
通常樣式變多時，程式碼會變得很冗長，不易閱讀以及維護。
##### ---這邊引用kent前輩的[介紹](https://ithelp.ithome.com.tw/articles/10272878)
* 因此出現了一個很好用的手稿語言 SCSS ，能夠讓工程師把利用巧妙的方式先在 SCSS 當中撰寫完成，接著再使用編譯器把內容展成重複性高且視覺上看起來較複雜的 CSS。
---
### SASS & SCSS 介紹
* SASS(SCSS) 是一套 CSS 的擴展語言語言，能幫助工程師在撰寫 CSS 更加便利，但同樣的 SASS(SCSS) ，因此需要寫完後要經過編譯才能轉換成 CSS ，因為網頁無法引入 SASS(SCSS)。
* SCSS 和 SASS 是都是 CSS 的擴展語言，只是有一些些差別，初學者可以先學習 SCSS，等到較為精熟或本身是CSS工程師再去進行 SASS 的部分。

>接觸SASS之前，撰寫CSS很容易但是要維護內容卻很麻煩，比如說：「改某頁面的h2顏色」、「網頁主色調改成xx色」…這些工作都會浪費很多時間，
透過SASS可以有效管理CSS，依照目前的使用經驗大概列出幾個特色出來：
1. 節省時間
2. CSS模組化
３．CSS段落分明
##### ---這邊引用yuski前輩的[介紹](https://ithelp.ithome.com.tw/articles/10192750)
---
### 安裝與環境架設
1. Live SASS Compiler 是一款 VSCode 的延伸模組，所以直接去 VSCode 的延伸模組面板搜尋 Live SASS Compiler 就可以找到了，接下來點選安裝就初步完成了(這個模組支持 SASS 和 SCSS 兩種寫法，請不用擔心)。

2. 接下來建立一個大資料夾，並在其底下建立另外一個資料夾叫 SCSS，接下來在 SCSS 資料夾底下建立一個新檔案命名 all.SCSS。再把這段程式碼複製下來貼上all.SCSS 當中 。
> $header-background-color : #d5cbbf;
>
> header{
> background-color: $header-background-color ;
> }

3. 我們可以看到畫面最底下有一個 watch SASS 的按紐，這個功能能夠讓電腦自動編譯把寫完的 SASS 檔案經過每次儲存就自動變成 CSS 檔，點下去過後就可以看到自己的 SCSS 檔案中出現了 all.CSS 。
* 看得出上面這是一段 SCSS 程式碼，而非 CSS ，因為當中有使用變數。因此要把這段程式碼轉成 CSS 需要經過 Live SASS Compiler 的編譯，下面這個 Watch Sass 按鈕是 Live SASS Compiler 的即時編譯功能。

4. 接下來在大資料夾建立一個資料夾命名為 CSS，這個資料夾是用來存放自動編譯後的 CSS 檔案，但目前產生 CSS 檔案後放置路徑是設置在同一個資料夾底下。因此要設定之後自動生產的 CSS 檔案都要出現在 CSS 資料夾中。
1. 視窗左下角開啟設定 > 設定檔（預設） >　顯示內容
2. 選取 setting.json 檔案
3. 雖然沒有"liveSassCompiler"的相關參數，但其實還是有預設規格的，目前只需要貼上這一些就夠了。(後面的savePath就是路徑的意思，若是路徑設置的跟我不一樣，請記得稍作修改)
4. 接下來再次點開Watch Sass的按鈕，就可以看到自己的 CSS 檔案自動出現在 CSS 檔案中。
---
#### 推薦網站
1. kent前輩的[30天轉生到bootstrap5的意識界](https://ithelp.ithome.com.tw/users/20141308/ironman/4563)用幽默的方法寫了非常多網頁有用的東西以及知識，看完一輪後知道了許多特別好用的東西。
2. yuski前輩的[網頁學習日誌系列文](https://ithelp.ithome.com.tw/users/20107321/ironman/1390?page=1)介紹了網頁前後端都有的常見技術，可以訂閱系列文日後再慢慢一個一個學起來。
3. [An Sheng Huang](https://medium.com/@enshenghuang) 前輩的這篇Live SASS 介紹也是寫的很詳盡，我的第一次操作也是按照著此篇教學，而且比我的解釋得更為清楚及美觀[使用VSCode外掛自動編譯SASS/SCSS](https://medium.com/@enshenghuang/%E4%BD%BF%E7%94%A8vscode%E5%A4%96%E6%8E%9B%E8%87%AA%E5%8B%95%E7%B7%A8%E8%AD%AFsass-scss-9ff768d23b48)