Sass / Scss 教學 1

Sass 系列教學：

• Sass / Scss 教學 Part 1
• Sass / Scss 教學 Part 2

現今網站前端(frontend)工程師者肯定會用到的其中一種語言就是 CSS(Cascading Style Sheets)，不過 CSS 其實是一種很冗笨的語言，不僅沒有變數(variables)的功能、也沒有巢狀(nested)的規則，也沒有引用(include, import)的功能，相同的設定經常會出現在不同的 CSS 區塊中，例如配色、高度、寬度、樣式，而且經常一堆 class, id 的樣式滿天飛，如果對某些配色不滿意，或是對某些樣式(stylesheet)不滿意，就可能得一個一個慢慢修改或是全域取代，要是 CSS 能夠有更像程式語言的語法與規則的話，也許將會更省事，整體的 CSS 也會更有規劃、組織。

也因為如此，Hampton Catlin, Nathan Weizenbaum, and Chris Eppstein 還有 Alexis Sellier，這些聰明的程式設計師分別發明了 Scss/Sass 及 less 兩種 CSS Pre-Processor ，擴充了既有 CSS 的語法、規則及功能，達成變數、巢狀設計、引用等功能，只需要最小程度的遵守他們制定的語法，再透過 Sass 或 less 編譯(compile)之後，就能夠產生 CSS 檔案，你只需要維護遵循 Sass 或 less 語法撰寫出來的檔案，就可以達到前端快速開發、修改、維護的效果！

在教學開始之前，得先釐清的是 Sass 本身有兩種語法。

• 第一種為 Scss (Sassy CSS)，此種語法比較像原本 CSS 的語法，是用大括號定義區塊，而且與 CSS3 之間的整合性最好，任何 CSS3 定義的 CSS 語法都能夠在 Scss 中使用，Scss 的副檔名為 .scss 。

• 第二種語法為 Sass ，是屬於比較舊的語法，而且不是以大括號定義區塊，而是以縮排(indent)，此外，也不需以分號來宣告結尾，因此如果喜歡簡潔風格的朋友，可以使用 Sass 語法。，Sass 的副檔名為 .sass 。

雖然有這兩種差別，不過本文還是以 Sass 通稱 Scss/Sass (畢竟最早是被稱為Sass)，而所有的範例則是以 Scss 語法做為示範。

Sass / Scss 語法教學 #

Sass 原則上還是與 CSS 十分相似，只是加了上述所說的一些功能，能夠讓你的 CSS 碼更好維護、更具可再利用性。如果你學過 CSS 肯定會愛上它，如果沒有，也可以在看過一些基礎的 CSS 教學後，直接學習如何使用 Sass 幫助開發。

官方網站上已經有相當好的安裝及使用指令，在此就不再多提如何安裝使用囉！連結

本文使用的 Sass 版本是：

• Sass 3.5.1

如果不想安裝，建議可以使用 CodePen 內建的 CSS Preprocessor 學習。

變數 (Variable) #

利用錢號($)，可以建立 Sass 變數，再使用冒號(:)指定其值，最後以分號(;)結束。

變數語法：

$variable : value ;

設計網站、撰寫 CSS 時，我們可能會挑選一些色碼做為基本的配色，因此在整個 CSS 檔中，這些色碼經常會重複出現，如果能夠將這些色碼以變數來表達，不僅能夠快速更換網站配色，也能夠提高 CSS 可維護性。當然，變數的用法也不見得只能用在色碼的變動，也能夠在使用在網頁 class 或 id 的名稱等等，如果能夠規劃得宜，撰寫出能夠方便維護的 Scss 檔，是十分可能的！

變數範例：

$major-color: #777;
$slave-color: #888;

p {
  color: $major-color;
}

h1 {
  color: $slave-color;
}

目前變數支援的型態有：

1. 數字 (含小數)
2. 字串，如 "String" , 'String' , String 3 種皆可
3. 顏色，如 blue , #0a43f9 , rgba(255, 0, 0, 0.5) 等
4. 布林值 true , false
5. 空值 null
6. 串列，例如 $font-list: Helvetica, Arial, sans-serif; ，以空格或逗號分隔的一連串的值
7. 鍵值映對(maps) ，例如 $map: (key1: value1, key2: value2, key3: value3);
8. 函數參照(function references)

上述詳盡說明可以參考 Data Types

變數範圍 (Variable Scope) #

變數能夠作用的範圍也分為全域(global scope)及區域(local scope)兩種。簡單來說，只要不被任何 CSS 區塊所包含的變數，就是全域變數(不在任何 { } 內所宣告的變數)，反之，就是區域變數。

區域變數無法跨 CSS 區塊，全域變數可以。

如果在跨區塊誤用 local scope 的變數，就會被提示 Undefined variable 。

範例：

$global-var: #777;

p {
  $local-var: #888;
}

h2 {
  color: $local-var; // YOU WILL GET AN ERROR! Undefined variable: "$local-var"
}

變數預設值 (Default Value) #

變數可以設定預設值，只要在定義變數的語法後加上 !default 即可。

語法：

$variable : value !default ;

範例 1：

$var : null;
$var : #777 !default;

p {
  color : $var; /* color: #777; */
}

範例 1 的 $var 因為是空值，所以 $var 就使用預設值 #777 。

範例 2：

$var : #888;
$var : #777 !default;

p {
  color : $var; /* color: #888; */
}

上述範例因為 $var 的值已經被指定了，因此不會是預設值 #777 。

變數的運算(Number Operations) #

Sass 的變數能夠進行加減乘除的運算，好比色碼的相加、長寬的相減等等。不過唯一要特別注意的是除法的使用，因為在 CSS 的語法中提供了像是 font-size: 1em/1.5em; 這種縮寫的用法，為了避免與 CSS 原有語法混淆，因此只有在特定的三種情況下，除法運算才會成立。

1. If the value, or any part of it, is stored in a variable.
2. If the value is surrounded by parentheses.
3. If the value is used as part of another arithmetic expression.

簡言之，就是若要進行除法：

1. 其中一個必須是變數，例如 $width / 2
2. 必須被小刮號 () 括起來，例如 500px / 2
3. 不只有除法符號出現，還必須是一個運算式的其中一部份，例如 5px + 8px / 2px

詳細可以參考 Number Operations

Interpolation #

其實 Interpolation 與變數很類似，不過在官方說明文件中，任何與 Interpolation 鄰近的字元都會在視為 CSS 的語法或文字。這樣的用法可以避免變數因為其他字元被混淆。

In most cases this isn’t any better than using a variable, but using #{} does mean that any operations near it will be treated as plain CSS.

語法：

#{$variable}

例如以下的範例：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

其實就會被編譯成：

p.foo {
  border-color: blue;
}

Interpolation 的用法，在稍後會介紹的 @mixin 中也經常會被使用到喔！

接下來請看 Sass / Scss 教學 Part 2

參考資料：

http://sass-lang.com/documentation/file.SASS_REFERENCE.html