聯成電腦菜鳥編網頁設計教學：一次讓你搞懂SASS @ 聯成電腦-讓你價值連城

文、菜鳥編

Sass是什麼？簡單的說就是CSS的預處理器，可以提升編寫網頁CSS效率的程式語言。至於能提升多少，真的只能說看個人需求，假使你今天是一位剛步入網頁領域的菜鳥，可能一時間真的沒法感受到預處理器帶來的好處。但當你逐漸長大，開始負責大型的案子，相信你應該不會想要在一堆沒有整理過的code找到你要的內容。Sass簡單的說就是，「減少重複樣式的編碼撰寫」、「將樣式重複使用，降低多餘的編碼在開發環境中影響效率」。

這類的預處理器也不只有Sass，還有LESS、Stylus等…，各有其特色在，今天要介紹的Sass你也有耳聞到跟它名稱類似的Scss。這兩個是兄弟？有什麼差別？由於Sass是以縮進方式編寫，類似python，不具大括弧與分號格式，但也因如此，無法直接將大家最熟悉的CSS編寫方式直接套用，所以在初期並未受到已習慣純CSS方式的人青睞。不過在Sass 3進行了改良，引入新的語法，採用大家最習慣的CSS撰寫方式，具有大括弧與分號格式，語法完全兼容CSS3，並且繼承了Sass的強大功能。所以你曾經寫過的CSS檔案也可直接套用在SCSS上。

下面是Sass與Scss編碼上的差異：

Sass：

#sidebar
    width: 60%
    background-color: #faa
      .menu
               width: 50%

Scss：

#sidebar {
width: 30%;
background-color: #faa;
.menu {
width: 50%;
}
}

CSS：

#sidebar {
width: 30%;
background-color: #faa;
}

#sidebar .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開發中，我們可以將專案中經常會使用到的設定值以變數方式來規劃，例如、字體格式、大小、顏色等…。使用「$」來定義變數，例如下面的定義：

Scss：

$color-White: #fff; //定義白色
$color-green: #50b550; //定義綠色
$fone-size: 16px; //定義基本文字大小

//樣式宣告
.title_1 {
background-color: $color-green;
color: $color-White;
font-size: $fone-size * 1.6;
}

變數的宣告並不會在編譯後的CSS中出現。

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內容

CSS：

ul {
list-style: none;
}

ul li {
display: inline-block;
padding: 10px;
}

ul li a {
color: #888;
font-size: 16px;
}

使用Sass巢狀方式，就可以簡化如下，在編譯成CSS代碼時，巢狀就如同父級與子元素的關係。

Scss：

ul {
list-style: none;
li {
    display: inline-block;
    padding: 10px;
    a {
      color: #888;
      font-size: 16px;
    }
}
}

另外有一種狀況並非是父子關係而是同層關係，例如選擇器，以下面hover的案例，就會加上「&」符號來代表與父級為同層。所以當使用「>、~、+ …」等的選擇器就可以用這方式來表達。

Scss：

.box_3 {
background-color: $color-green;
&:hover {
background-color: #888;
}
}

CSS：

.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」另外給三個變數新的值。

Scss：

.box_4 {
@include circle;
}

.box_5 {
@include circle(150px, 50%);
}

完成後的結果如下，在沒有給變數定義新的值時，就會以預設的值來編譯。

※Sass中的mixin函數引用也可使用「+」。

Sass：

.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」。

Scss：

.p1 {
color: nth($color, 2);
}

.p2 {
color: nth($color, 3);
}

HTML：

<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(變數,鍵名) 來取得

Sass：

.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);
}
}