SCSS 筆記

本篇記錄前端 SCSS 的一些筆記。

SCSS 和 Sass 的差別在哪裡？

Sass 為 Syntactically Awesome Style Sheets 的簡稱，是一種預處理腳本語言（Pre-processor scripting language），將 SASS File 編譯後可得到一般的 CSS File。

那麼，SCSS 呢？

SCSS aka Sassy CSS（參考#1），是 CSS 的超集合。不論是 .sass 或 .scss 都是 Sass 的格式，要被 Sass 的編譯器轉換過才能使用。而 .sass 是比較舊的格式，並且因為一些問題而較難被閱讀和撰寫，所以相容 CSS 的新格式 .scss 就誕生了。

接下來對 Sass 的使用皆以 SCSS 的語法為主。

SCSS 基礎

參考官方教學（參考#3 - Sass Basic），實際練習可搭配 Sassmeister 來使用（參考#4）

Variable 變數

Sass 的變數就和一般程式語言的一樣，宣告和呼叫時加上錢字號 $ 在前即可。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

編譯後如下

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting 巢狀結構

HTML 有著巢狀的結構，但一般的 CSS 卻沒有，在 Sass 中則加入了巢狀這個特性。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

如 nav 底下的 ul, li 及 a 要撰寫 CSS，必須在 ul, li 及 a 之前加上 nav，但在 Sass 中可省去此步驟，直接把這三個元素包起來。編譯成 CSS 後如下

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partials 部分檔案 及 Modules 模組

在 Sass 中可以使用底線開頭的檔案如 _partial.scss，然後用 @use 來使用這樣的部分檔案，引入後就會包成一個 module，使用時用 moduleName.? 來取用 module 裡的 variables, mixins 和 functions。

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

編譯後得到

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

Mixins 混和

在 Sass 中也可以自定義一些 CSS rules 混和在一起，使用方式就像是一個會回傳一堆 CSS rules 的 function，也可以傳入變數。宣告時用 @mixin 開頭，取用時則用 @include 來使用。

@mixin theme($theme: DarkGrey) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, 0.25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

編譯後得到

.info {
  background: DarkGrey;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}
.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}
.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

Extend / Inheritance 延展／繼承

如同物件導向的程式語言，Sass 也可以用 extend 來繼承先寫好的一些屬性。

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}
.success {
  @extend %message-shared;
  border-color: green;
}
.error {
  @extend %message-shared;
  border-color: red;
}
.warning {
  @extend %message-shared;
  border-color: yellow;
}

編譯後得到

.warning,
.error,
.success,
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

參考資料

1. Stack Overflow - What’s the difference between SCSS and Sass?
2. Geeks for Geeks - What is the difference between SCSS and SASS ?
3. Sass Basic
4. Sassmeister