Sass / Scss 教學 1

Posted on  Sep 2, 2017  in  CSS  by  Amo Chen  ‐ 4 min read

Sass 系列教學:

現今網站前端(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/Sassless 兩種 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

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!