Sass與SCSS介紹

 文：顏怡宏 恆逸教育訓練中心專任講師

Sass(Syntactically Awesome Style Sheets) 與 SCSS(Sassy CSS) 都是CSS的預處理器 (CSS preprocessor)，所謂CSS的預處理器就是一種可以提升撰寫CSS網頁效率的處理機制，也可以說是一種程式語言。因此要介紹Sass與 SCSS之前必須先了解CSS(Cascading Style Sheets)階層樣式表目前面臨到的問題。

CSS的任務就是負責網頁外觀與排版的屬性設定。雖然CSS是一個必要的基礎工具，但是要在單一網頁中寫好CSS就已經不是一件簡單的工作，在撰寫整個網站時會更加困難，更不用說在撰寫或管理大型網站專案時，如果沒有妥善管理CSS，很容易形成雜亂的結構，進而引發無法管理與維護的災難。

會造成這些問題是因為CSS的樣式宣告是全域可見的，這代表整個網頁都可以隨意使用這些樣式宣告，但是在便利的同時也代表可以隨意覆寫這些樣式宣告。再加上CSS階層樣式的繼承特性，就非常有可能在撰寫CSS的時候一不注意，就導致樣式被不預期的覆寫，這將使得在除錯時期非常困難；一般我們會使用選取權重的方式來控制覆寫，雖然看起來是嚴謹的，但是專案執行期間，在有限時間與多變需求所造成的壓力下，一不注意就會在CSS中寫出了難以除錯的設定。

另外CSS是一種靜態的設定，並不像是其他程式語言擁有類似 if...else 的邏輯判斷能力，也沒有for這種能輕鬆重複的行為，更沒有提供自訂函數這樣進階的功能，因此只能逐行的進行編輯。如果頁面有很多相同的外觀設定需要修正時，就必須花很多時間逐一修正，在進行網頁維護時會花費大量時間精力來進行調整。

而隨著網頁開發的複雜度越來越高，CSS的可維護性也越來越顯重要，但是標準CSS語法有重複性不佳、可維護性差等缺點，於是大家就開始思考若是能讓 CSS 像一般程式語言一樣，有變數、函式、迴圈等功能，應該就可以改善這些問題，因此便發展出CSS預處理器來擴展出更多有彈性的寫法。

CSS預處理器的基本概念就是利用一種專門的程式語言，進行網頁外觀與排版的樣式設計，並且將CSS作為目標生成文件。也就是為CSS加入程式設計的特質，例如可以在 CSS中使用變數、邏輯、函數等功能。最後CSS預處理器就會編譯而產生出瀏覽器能夠解讀的標準CSS語法。

 CSS預處理器技術目前已經非常的成熟，也湧現出了越來越多的CSS預處理器語言，而Sass與SCSS就是目前最熱門也最廣泛使用的CSS 預處理器，能用來清晰地、結構化地描述CSS文件樣式，有著比標準CSS更加強大的功能，並且使用特定的語言，讓寫出的CSS變得更簡潔、維護性更強、可讀性更佳等許多優點。在開發大型專案、多人協同作業的情況下，如此更能發揮強大的效果。

Sass 是最早的CSS預處理語言，誕生於2007年，有著強大的功能。並且使用縮排式語法，雖然縮排式語法可以有效縮減程式碼的行數，但是由於無法跟標準CSS語法相容，一開始普遍不被大部分開發者接受。這就是Sass 雖然出現得最早，但卻不普及的原因。

因此Sass就進化成為SCSS了，也就是說Sass和SCSS其實是前後代的程式語言，一般都統稱之為Sass，而兩者之間的主要差異有兩點，首先是文件副檔名不同，Sass 是以.sass為副檔名，而SCSS 是以.scss為副檔名。其次是語法規則不同，Sass是以嚴格的縮排式語法規則來書寫，不包含大括號 {} 和分號 ; ，而SCSS的語法書寫和標準CSS語法書寫方式非常類似，有包含大括號 {} 和分號 ; 。

以下就是三者簡單的語法範例：

Sass 語法

$main-color: #888

body

color: gray

background-color: $main-color

SCSS 語法

$main-color: #888

body {

color：gray;

background-color: $main-color;

}

最後編譯出來的CSS

body {

color：gray;

background-color: #888;

}

經由這個例子就可以看得出來，Sass的語法與標準CSS語法並不相容，而SCSS的語法與標準CSS語法並是相容的，因此SCSS就獲得了廣大網頁開發者的支持。嚴格說起來， SCSS是標準CSS的superset超集合，可以在SCSS中使用所有CSS的語法與功能，但通常SCSS不能夠直接使用在標準的CSS裡面，簡單來說，把已經寫好的.css文件直接把副檔名修改成.scss就可以直接使用，而反過來就不一定可行。

至於Sass預處理器還有許多強大的能力，在這裡簡單介紹部分功能。

變數(Variables)：如果要統一定義整個網站中某個特定屬性的值，例如固定的背景顏色，或是有一直不斷重複使用的CSS屬性，都可以使用變數，概念與寫 JavaScript 時的宣告變數定義是類似的觀念。Sass變數以$開頭，賦值方法與CSS屬性的寫法一樣，Sass的變數不但有資料型態，甚至還擁有區域變數跟全域變數的觀念。

嵌套規則(Nested Rule)：當我們在撰寫網頁的HTML時，可以輕易的寫出元件之間相互的父子階層結構，但在傳統的CSS中卻無法做到，因此需要重複撰寫父元素選擇器以取得子元素。這問題可以透過Sass中嵌套的語法來解決，要取得父選擇器，只要使用&這個符號就可以輕易完成。有些許多CSS屬性都需要使用相同的前置屬性名稱，例如background-color、background-image、background-position都以background作爲前置屬性名稱。爲了方便使用這種類型的屬性，避免重複輸入，Sass也能夠進行屬性嵌套。

混合(Mixins)：使用@mixin可以根據不同參數的設定，來產出類似的樣式。當有一段CSS屬性設定經常性地被重複使用，就可以將這段屬性設定獨立寫成一個@mixin，裡面也可以寫邏輯判斷。設定好@mixin之後，可以用@include 引入來重複使用，甚至取用@mixin時可以另外帶入參數及預設值，以達成更高的使用彈性。

繼承(Extends)：在設計網頁時候常常遇到有一個選擇器需要包含另一個選擇器中的所有樣式，但是又需要加入更多其他的樣式。傳統通常都要一直重複寫相同的CSS樣式，在 Sass 中我們可以使用 @extend 的功能就可以將另一個選擇器的內容樣式直接繼承過來，只要增加其他需要的樣式即可。

SassScript：Sass提供了一種SassScript程式語言。SassScript可以使用在任何屬性，讓屬性能夠使用變數、提供數學運算，甚至提供了邏輯判斷與迴圈的重複能力。SassScript甚至可以直接產生選擇器或屬性名稱，這一點對寫出結構化並且容易維護的CSS有極大幫助。

其他特性：Sass中還有許多特性像是使用各種資料型別、內建functions與內建模組等，本文只是簡單的介紹Sass的基本功能，當各位讀者深入了解Sass的細節，了解更多的強大功能之後，就會發現Sass處處是驚喜，是非常值得學習的技術。

✅學習推薦

Sass與SCSS快速上手