更便利於撰寫與管理CSS 的工具- Sass / SCSS，如何使用

如何編譯Sass / SCSS 語法？ 這邊有兩個編譯器可以跟大家介紹：. Prepros; VS code 擴充套件：Live Sass Compiler. 不過 ... 更便利於撰寫與管理CSS的工具-Sass/SCSS，如何使用、編譯？ CSS在網頁上的需求愈來愈多，但是在愈寫愈多的情況下，預設的CSS語法可能無法滿足，管理上也比較不易，而今天要介紹的Sass/SCSS就能夠幫助我們更方便於CSS的撰寫與管理。

什麼是Sass/SCSS？有什麼特點？ 基本上Sass/SCSS有以下特點： 巢狀式樣式 利於切分各個樣式檔案 有變數功能 有類似於像是function的功能mixin，有助於減少重複多個語法，也能更善於撰寫RWD網頁 其中SCSS也支援純CSS寫法 以上幾個特點能，夠使CSS增加可維護性。

不過如果要使用Sass/SCSS語法還必須搭配編譯軟體，再透過軟體將Sass/SCSS由上而下編譯成網頁看得懂的css檔案，因為在引入上網頁並看不懂Sass/SCSS檔案。

如何編譯Sass/SCSS語法？ 這邊有兩個編譯器可以跟大家介紹： Prepros VScode擴充套件：LiveSassCompiler 不過這一篇呢我打算使用Prepros來編譯（我用過LiveSassCompiler了，所以趁機會來試試Prepros），當然大家如果對LiveSassCompiler有興趣也可以上網Google一下資料～ 軟體名稱：Prepros 軟體下載：DownloadPrepros7，目前提供MacOS、Windows、DebianLinux三種作業系統下載使用。

下載完執行後可以看到以下畫面： 此時我們將要編譯的專案目錄直接拖曳到Prepros內： 拖曳後就能看到Prepros內有預設的index.html以及style.scss兩支檔案，而後我們使用VScode開啟，可以看到預設是只有scss的樣式檔，沒有CSS檔案： 此時當我們輸入值並按下儲存後，自動產生出了style.css檔案： 我們將style.css打開並放置於右側，發現語法跟左邊是一模一樣的！原因是因為Prepros能夠偵測到專案裡面的Sass/SCSS是否有更動，如果有更動的話就會在相對應的CSS進行直接更動，但如果找不到相對應的則直接建立一個css檔案，例如這個範例。

因此當我現在針對style.scss作任何更動，儲存之後右邊的CSS就會跟著變動。

巢狀寫法示範：原始CSS怎麼寫？ 首先我們先來看要達成的效果圖： 我希望h2的「title」字樣大小為36px、副標題使用標籤包住為16px，鏈結顏色使用紅色，傳統CSS可以這麼寫：（基本上實務CSS語法不會這樣下，僅提供示範用） 123456789101112.products{display:flex;}.productsh2{font-size:36px;}.productsh2span{font-size:16px;}.productsa{color:red;} 這邊會遇到什麼問題？ 光是.products就重複下了四次 萬一之後要改類別名，豈不就要改四次？ 因此，我們試著使用Sass/SCSS的巢狀特性來改善這個問題。

巢狀寫法示範：SCSS 123456789101112.products{display:flex;h2{font-size:36px;span{font-size:16px;}}a{color:red;}} 我們可以發現以下幾點改變： 本來四個獨立的CSS選取器設定，合併成一個，並且下面有不同的分層 .products第一層本身除了要設定為Flex特性外，也能夠同時設定.products下一層的h2、a標籤樣式 至於第二層仍然可以在往下一層設定樣式，因此h2標籤除了有字體大小設定外，也針對下一層span設定字體大小 這樣就能夠非常方便的進行樣式管理，另外巢狀不只針對標籤，就算.products下一層有類別選擇器也是能夠使用巢狀方式來做設定的。

不過要跟大家提醒，一般來講巢狀語法不超過四層是最為洽當的。

巢狀寫法示範：Sass 12345678.productsdisplay:flexh2font-size:36pxspanfont-size:16pxacolor:red Sass的寫法省略了{}括號以及;分號，至於要怎麼判斷分隔呢？像是我要針對.products設定Flex，可以看到範例該行語法距離前段為一個tab鍵的距離，至於對於h2與a標籤的設定則為2個tab鍵、針對span的第三層要3個tab鍵，以此類堆。

因此Sass的寫法更強調階層的寫法，CSS與SCSS如果在階層上沒這麼整齊，只要能透過括號跟分號都還是能分辨；但如果是Sass該對齊沒對齊的部分就會報錯囉！另外如果加上括號跟分號也是會報錯的，所以Sass的寫法是比較嚴謹的，這個部分要稍微留意一下。

如果報錯會發生甚麼事？怎麼解決？ 此時我想把鏈結顏色改成藍色，但是不小心在Sass語法加上了分號，可以發現按下儲存後右邊並沒有編譯成功，這就代表我們寫錯了。

但當然這是我們故意犯錯，但是在寫code的過程中難免會發生連我們自己都不知道問題出在哪個錯誤，我們該怎麼debug呢？ 此時我們可以進入Prepros主程式並點擊Logs，這裡記錄了歷史編譯紀錄，不管是成功還是失敗都會記錄；因此我們就能夠在這裡尋找編譯錯誤的原因，進而將錯誤修正。

後記 Sass/SCSS的特點當然不只這樣，上面也提到了變數、切分樣式表、mixin，為了避免篇幅過長下次再來介紹，各位也可以練習看看哦～ 參考資料 CSSpreprocessor與Sass/SCSS基本語法介紹（Sass/SCSS是個CSS預處理器，有關預處理器可看這篇介紹） 希望我的文章能夠幫助到你，有任何問題或是想與我討論交流，歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章，想支持我繼續撰寫更多文章，歡迎你： 將我的部落格加入書籤，隨時造訪部落格。

將我的文章分享給你的親朋好友。

透過LikeButton幫我按5下讚。

每月贊助LikeCoin請我喝杯咖啡。

（雖然我不喝咖啡啦XD） CSS CSS Sass SCSS 本站所有文章除特別聲明外，均採用BY-NC-SA許可協議。

轉載請註明出處！ Sass/SCSS筆記：如何利用變數管理重複設定值？ 上一篇 RWD響應式網頁設計該注意的UI細節 下一篇  目錄 搜尋 × 關鍵字