SCSS

SCSS (Sassy CSS) 是加上了 Sass 語法強化過後的 CSS 樣式表，如果只有 Sass 的話，主要的差異是使用縮排區分定義區塊 (CSS 使用大括號 { })，並且使用換行作為樣式分段 (CSS 使用分號 ;)。

可以在所有地方使用的語法:

變數宣告

$var: value 的型式，值的部份可以是數值，也可以是算式。

要注意，在 CSS 中也有變數 (variables; 或稱 custom properties)，為 -- 開頭。

流程控制

• @if
• @each
• @for
• @while

編譯時期指引

產生錯誤或是偵錯訊息的編譯時期指引: @error (編譯會終止), @warn, @debug。

只可以用在最上層的樣式定義內的敘述: @use, @import, @mixin, @function。

模組 (@use)的語法目前只有 DartSass 支援，利用這個語法可以處理名稱空間汙染的問題。

舊有的 @import 語法，因為有名稱空間汙染的問題，看起來是計劃慢慢汰除掉。

Parent Selector (&) 用來巢狀的樣式定義中，在內層定義參考上一層的樣式符號名稱，。

Placeholder Selector (%...) 是給樣式定義放置一個暫時的名字，編譯後會把有 @extend 的 Selector 代換進去。

在樣式定義中，可以利用 nest block 集中定義前綴一樣的樣式屬性 (properties):

.info-page {
  margin: auto {
    bottom: 10px;
    top: 2px;
  }
}

編譯後會變成:

.info-page {
  margin: auto;
  margin-bottom: 10px;
  margin-top: 2px;
}

@function 用來定義產生樣式屬性值 (property value) 的邏輯，@mixin...@include 則是用來產生樣式定義。

Interpolation (#{ }) 可以用來將值嵌入 Selector 規則裡，或是 Property 的 Key 或 Value 中。當嵌入 Property Value 時，通常是用來產生一個字串，或是連結的值。

使用 @mixin 或是 placeholder (%) 的時機要看語意，一般來說 Placeholder 會比較著重於 Selector 間的繼承關係，比如 %error-base 到 .error-low, .error-high 的關係；而 @mixin 就比較是單純的功能性的，像是 @mixin container-5-cols 之類的。

這部份在官方文件的 Extends or Mixins? 有些說明:

Extends and mixins are both ways of encapsulating and re-using styles in Sass, which naturally raises the question of when to use which one. Mixins are obviously necessary when you need to configure the styles using arguments, but what if they’re just a chunk of styles?

As a rule of thumb, extends are the best option when you’re expressing a relationship between semantic classes (or other semantic selectors). Because an element with class .error--serious is an error, it makes sense for it to extend .error. But for non-semantic collections of styles, writing a mixin can avoid cascade headaches and make it easier to configure down the line.