HackMD
Sass 語法
TL;DR
這份筆記主要用來記錄 Sass 的語法，之前並沒有系統性的學習 Sass，只有在偶爾用到的時候查閱一下。希望透過這份筆記增加對 Sass 的理解，在專案開發時可以善用 Sass 的功能，讓專案的樣式規則更好維護與理解。
什麼是 Sass (Syntactically Awesome StyleSheet)
Sass 是 CSS 的語法擴充 (an extension of CSS3)，屬於 CSS 預處理器的一種 (Sass/SCSS 為最常見的一種)，需要被編譯成 CSS 後才能套用在 HTML 元素上。Sass 提高了 CSS 語法的 scalability, reusability, and maintainability。
Sass 有兩種語法
- 較新的 SCSS 語法，副檔名為
.scss - 較舊的 SASS 語法，副檔名為
.sass
由於 SCSS 語法可以兼容 CSS 語法，所以也較被廣泛使用
Sass/SCSS 基本語法 - 變數 Variables
在 Sass 中可以使用變數儲存 CSS 屬性值，相同的屬性就可以被重複套用，且方便修改。
定義變數
以 $ 字號開頭，後面接變數名稱與 :，: 後接上要儲存到變數的屬性值。
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
CSS 語法結構
CSS 樣式規則由兩個部分組成，選擇器 (selector) 與聲明 (declaration)
每個聲明由一個屬性 (property) 與屬性值 (value) 組成
Sass/SCSS 基本語法 - 函數 Function
在 Sass 中可以使用函數來定義需要被重複利用的邏輯，相同的運算邏輯就可以被重複使用。Sass 中有提供內建函數也可以自定義函數。內建函數參考
定義函數
@function {函數名稱}(${參數名稱}) {
...函數內邏輯
@return ${返回的變數名稱};
// 在每一條指令後要有 ;
}
實際定義函數並調用的例子
@function pow($base, $exponent) {
$result: 1;
@for $_ from 1 through $exponent {
$result: $result * $base;
// 注意不是使用等號
}
@return $result;
}
.sidebar {
float: left;
margin-left: pow(4, 3) * 1px;
}
在函數定義中有時會需要用到 statement 這種較高級的應用，關於 statement 的語法可以參考這篇
Sass/SCSS 基本語法 - 嵌套 Nesting
在 Sass 裡可以使用嵌套的結構來簡化 selector 與 property 的寫法
簡化 selector
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
}
會被編譯成
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
簡化 property
p {
border: {
// 注意要使用冒號 :
color: red;
}
}
會被編譯成
p {
border-color: red;
}
使用 & 引用父 selector
a {
&:hover { color: #ffb3ff; }
}
會被編譯成
a:hover {
color: #ffb3ff;
}
Sass/SCSS 基本語法 - 混入 Mixins
在 Sass 裡可以使用 mixin 定義一段會被重複利用的樣式規則，這一段樣式規則還可以根據參數改變。
定義 Mixin 與引入 Mixin
以 @mixin 定義，以 @include 引入
// 不帶有參數
@mixin {mixin 名稱} {
width: 100%;
height: auto;
}
// 以 @include 使用 mixin
.avatar {
@include {mixin 名稱};
}
// 帶有參數
@mixin {mixin 名稱}(${參數名稱}) {
width: 100%;
height: auto;
}
// 以 @include 使用 mixin
.avatar {
@include {mixin 名稱}({參數值});
}
實際使用範例
@mixin square($size, $radius: 0) {
// 帶入參數或預設值
width: $size;
height: $size;
@if $radius != 0 {
border-radius: $radius;
}
}
.avatar {
@include square(100px, $radius: 4px);
}
- 變數 - 重複利用樣式規則裡的值
- 函數 - 重複利用樣式規則裡的運算邏輯
- Mixin - 重複利用樣式規則裡的一段樣式規則
Sass/SCSS 基本語法 - 共用 Extends
在 Sass 裡可以使用 extend 定義一段會被重複利用的樣式規則，這一段樣式規則並不接受參數。
定義 Extend 與引入 Extend
以 % 為要重複利用的樣式規則命名，{} 內定義要重複利用的樣式規則。以 @extend 引入定義好的 extend。
%{extend 名稱} {
...要重複利用的樣式規則
}
{selector} {
@extend %{extend 名稱};
}
實際使用範例
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
Extend 與 Mixin 的差別
Extend 與 Mixin 都可以用來重複利用樣式規則，但兩者編譯成 CSS 的方式不同。
- Mixin - 編譯後，重複的樣式規則會插入在每一個選擇器中
- Extend - 編譯後，將有共用樣式規則的選擇器集中管理
若想知道兩者編譯後實際的差異，可以參考這篇文章。實際使用上，當樣式規則需要重複利用但不需要隨著參數動態改變時使用 Extend，當樣式規則需要重複利用且需要隨著參數動態改變時使用 Mixin。
Sass/SCSS 基本語法 - 引入模組 Import
Sass 支援模組化開發，透過 @import 引入不同的 Sass 檔案。
**Saas 會被編譯成 CSS 檔，但若在檔名前面加上 _ 則不會被編譯出來。**實際模組化開發 Sass 時，通常只會有一個 Sass 檔案作為所有 Sass 檔案的統一載入點，只有這份 Sass 檔案會被編譯，所以其他 Sass 檔都以 _ 開頭來命名，並以 @import 引入到統一的載入點中。
在統一個載入檔案裡可能會看到以下的開頭，可以發現這份樣式規則一共被切割為四個模組。
@import reset
@import layout
@import index
@import page
