聯成電腦網頁設計教學：一次讓你搞懂SASS
文、菜鳥編
Sass是什麼？簡單的說就是CSS的預處理器，可以提升編寫網頁CSS效率的程式語言。至於能提升多少，真的只能說看個人需求，假使你今天是一位剛步入網頁領域的菜鳥，可能一時間真的沒法感受到預處理器帶來的好處。但當你逐漸長大，開始負責大型的案子，相信你應該不會想要在一堆沒有整理過的code找到你要的內容。Sass簡單的說就是，「減少重複樣式的編碼撰寫」、「將樣式重複使用，降低多餘的編碼在開發環境中影響效率」。
這類的預處理器也不只有Sass，還有LESS、Stylus等，各有其特色在，今天要介紹的Sass你也有耳聞到跟它名稱類似的Scss。這兩個是兄弟？有什麼差別？由於Sass是以縮進方式編寫，類似python，不具大括弧與分號格式，但也因如此，無法直接將大家最熟悉的CSS編寫方式直接套用，所以在初期並未受到已習慣純CSS方式的人青睞。不過在Sass 3進行了改良，引入新的語法，採用大家最習慣的CSS撰寫方式，具有大括弧與分號格式，語法完全兼容CSS3，並且繼承了Sass的強大功能。所以你曾經寫過的CSS檔案也可直接套用在SCSS上。
下面是Sass與Scss編碼上的差異：
#siderbar
width : 60%
background-color : #faa
.menu
width : 50%
#siderbar {
width : 60%;
background-color : #faa;
.menu {
width : 50%;
}
}
#siderbar {
width : 60%;
background-color : #faa;
}
#siderbar .menu {
width : 50%;
}
大致上了解了什麼是預處理，接著就進入主題來介紹Sass，這邊的案例會以Scss編寫，由於Scss是繼承了Sass，所以不論你選擇是哪一種預處理器來使用，觀念都是一樣的。
環境的建置：
每個人習慣的開發工具不同，這邊以vscode為例，其他的使用者可以在網路上找到對應的資料。這邊會使用到的套件為「Live Sass Compiler」。
透過命令選擇區( Ctrl + Shift +P )，可找到相關指令，其中「Live Sass:Watch Sass」就可以將工作區內的Scss檔案編譯成CSS，並同時監聽。
另一個方式就是點擊vscode底部的「Watch my Sass」。
經過編譯後，會在專案資料中產生與scss檔案相同名稱的CSS。
變數：
在Sass開發中，我們可以將專案中經常會使用到的設定值以變數方式來規劃，例如、字體格式、大小、顏色等。使用「$」來定義變數，例如下面的定義：
$color-White : #fff; //定義白色
$color-green : #50b550; //定義綠色
$font-size : 16px; //定義基本文字大小
//樣式宣告
.title_1 {
background-color : $color-green;
color : $color-White;
font-size : $font-size * 1.6;
}
變數的宣告並不會在編譯後的CSS中出現。
.title_1 {
background-color : #50b550;
color : #fff;
font-size : 25.6px;
}
上面的案例可以看到font-size部分使用了乘法，在Sass中變數具有加減乘除的運算能力。但可別以為只有數字的變數可以進行運算，就連顏色都沒問題。
$color-green : #50b550; //定義綠色
.box_1 {
background-color : $color-green;
}
.box_2 {
background-color : $color-green / 2;
}
做設計的都知道，不可能有一次就到位的狀況，客戶或是老闆一定會用他那專業度的美感請你修正。這時，變數的好處你馬上就能體會，僅需要修改參數設定即可，不需要再針對code逐次的修改。而運算更可以省去按計算機的時間，尤其當你要將一個寬度1000px劃分9個區塊時就相當方便。
巢狀：
巢狀用來明確定義階層，省去編碼重複的填寫與可讀性提升外，在管理與維護上都會方便許多。
以下是我們很常看到的項目清單CSS內容
ul {
list-style : none;
}
ul li {
display : inline-block;
padding : 10px;
}
ul li a {
color : #888;
font-size : 16px;
}
使用Sass巢狀方式，就可以簡化如下，在編譯成CSS代碼時，巢狀就如同父級與子元素的關係。
ul {
list-style : none;
li {
display : inline-block;
padding : 10px;
a {
color : #888;
font-size : 16px;
}
}
}
另外有一種狀況並非是父子關係而是同層關係，例如選擇器，以下面hover的案例，就會加上「」符號來代表與父級為同層。所以當使用「、~、+ 」等的選擇器就可以用這方式來表達。
.box_3 {
background-color : $color-green;
:hover {
background-color : #888;
}
}
.box_3 {
background-color : #50b550;
}
.box_3:hover {
background-color : #888;
}
Mixin：
可以把Mixin想成是一堆值的群組，以下面的code來說，使用@mixin定義了名稱為「circle」的mixin涵式。在circle上宣告了$w、$r兩個變數，並分別給予預設值100px、20%。
@mixin circle ($w : 100px, $r : 20%) {
width : $w;
height : $w;
border-radius : $r;
background-color : $color-green;
}
涵式宣告完成後，引入方式則是透過@include，下方code「.box_4」直接引用circle涵式，「.box_5」另外給三個變數新的值。
.box_4 {
@include circle;
}
.box_5 {
@include circle(150px, 50%);
}
完成後的結果如下，在沒有給變數定義新的值時，就會以預設的值來編譯。
※Sass中的mixin函數引用也可使用「+」。
.box
+circleSass
Mixin的使用可以省去重複相同CSS樣式的編寫，例如最常使用的垂直置中就可利用mixin引入的方式，適應不同的區塊大小。
Import：
一個比較大型的網站開發，如果將所有樣式都放在同一個CSS檔案不是一個很好的方式，程式碼動則幾千行，非負責的開發人員，要馬上了解樣式的內容可就不是一件簡單的事情。所以在開發中會將CSS程式碼切成好幾份來做管理，最後再編譯合併成一個CSS檔案。
透過import就可以將相關檔案載入。以下圖來說，將專案切分成三個檔案來管理，最後再將三個檔案彙整在main.css裡。
在main.scss上加上這3行。
@import base/head ;
@import base/body ;
@import base/footer ;
不曉得你有沒有發現檔案名稱前面都有加上「_ 」？其實目的是要在編譯的過程中，將這些檔案排除掉，不會轉換成CSS格式。而加上下底線就是方便讓編譯的程式判別，最後僅需對main.scss編譯成main.css。
Extend：
CSS重複的代碼越多，除了造成檔案變大外，相對的在網頁讀取時就會影響到SEO的品質分數了。因此在開發過程中會將相同樣式的的內容合併起來方便管理，例如下圖中的「.box」。
CSS
在純CSS狀況下，就必須要在html中將對應的元素的class加上box。當編碼很多的狀況下，就必須不斷的切換檔案，影響到專注度。而Sass中的繼承(extend)就可以解決這問題。
以上面案例來說，將.box改為「%boxAll」，其中boxAll為合併樣式的名稱。
在後續編寫中，遇到要使用相同格式的，就不需要在切換到HTML中添加class名稱，直接在目前編寫的樣式中加入「@extend %boxALl」。
Scss
編譯後，就會將code中繼承的合併在一起。
CSS
有些人可能會感覺跟@mixin很像，到底要怎麼用比較適合？就以代碼是否需要修改來判定吧！假使今天的樣式是固定不需要修改，也就你不需要以@mixin中變數的來修改外觀。那使用@extend會比較適合。
進階應用：
前面我們有提到變數的應用，不過變數可並不是只能存放單一資料，也可存放多個資料型態中，也就是接下來會提到的「陣列」與「物件」。舉個例子，在開發過程中，我們一定會針對某項設定定義多個變數，例如，網頁視覺色、字體、尺寸等，就可以將同類型的變數透過「List」或是「Map」來歸納整理。
List(陣列)：
下面的例子宣告了一個名為color的變數，並使用陣列方式宣告了三個顏色。
$color : #fff, #7d3a3a, #f67070;
透過nth(變數，索引) 來引用List中的資料，例如下方「.p1」使用了變數$color中的第2個索引值，也就是「#7d3a3a」。
.p1 {
color : nth($color, 2);
}
.p2 {
color : nth($color, 3);
}
p class =p1這是使用nth($color,2)/p
p class =p2這是使用nth($color,3)/p
結果如下：
Map(物件)：
物件與陣列不一樣的地方在於Map可自訂每個資料的鍵名，以下面來說，定一了一個名為btnColorChange的變數，用來設定按鈕在滑鼠hover時的顏色變化。其中Default與hover就是鍵名，#afd5e6與#7f99a5就是對應的鍵值。
$btnColorChange : (
default : #afd5e6,
hover : #7f99a5,
);
引用方式透過map-get(變數,鍵名) 來取得
.btn {
background-color : map-get($btnColorChange, default);
:hover {
background-color : map-get($btnColorChange, hover );
}
}
完成如下：
Function(涵式)：
如果有javascript或是其他程式語言背景的人，看到上面的List與Map是不是非常熟悉？其實Sass本身還提供了一些好用的函式，也可自訂函式使用，靈活度相當大，以上面的例子來說，也可透過if的判斷涵式可以將code修改如下：
將按鈕有關的變數以名稱為btnColor的map編寫，並在@mixin引用if判斷式來完成按鈕hover前後背景與文字的顏色變化。
$btnColor : (
bgDefault : #afd5e6,
bgHover : #7f99a5,
textColorDefault : #000,
textColorHover : #fff,
);
@mixin btnColorChange ($status) {
@if $status == default {
background-color : map-get($btnColor, bgDefault );
color : map-get($btnColor, textColorDefault );
} @else {
background-color : map-get($btnColor, bgHover );
color : map-get($btnColor, textColorHover );
}
}
原本按鈕的編碼就省略了許多，在開發中就可省去許多重複編碼的出現，執行中如果要修改顏色，也僅需要調整$btnColor變數內的鍵值就可以。
.btn {
@include btnColorChange(default);
:hover {
@include btnColorChange(hover);
}
}
這篇文章的介紹也只是Sass的功能一部分，如果想要深入了解函式的功能可以參考這裡。
前端設計人員要學習的內容很多，但重點不是要會，而是要能幫助你提升開發效率才是重點，如同文章一開始所提的，如果只是寫寫個小網頁，你可能會覺得光學習與習慣sass就需要不少時間成本，可能划不來。但如果是站在整個專案維護的角度來看，Sass就是一個不錯的選擇，可在修改內容時，不用在一堆碼海中找到目標，對於其他人來了解你的內容也會比較快速。
如果你覺得這篇文章很實用，也別忘了分享給你的親友們，相信對他們一定很有幫助！
痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w
