次世代 Hugo

無駄を削ぎ、本質を研ぐ

Sass 簡介

Sam Xiao's Avatar 2025-07-27

Sass 為 CSS 的前處理器，可以想成是 CSS 的 Template Engine，最後會編譯成標準 CSS。Sass 提供了 3 大基礎功能：巢狀結構、變數 與 引用檔案，彌補了 CSS 之不足。

Version

Sass 1.89.2

巢狀結構

.header {
  background: orange;
}

.header ul {
  display: flex;
}

.header ul li {
  margin-right: 10px;
}

.header ul li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  font-style: 18px;
}
  • 傳統 CSS 若要描述 header class 與其內部的 element，必須如上將 CSS 以 Descendant Combinator 方式撰寫

但這樣寫有幾個缺點：

  • 若其他頁面要使用 header component，要將 header class 都複製過去時，若 headers class 沒有集中撰寫，常常會遺漏了某些 selector
  • 若有其他人要替 header class 增加 selector，可能寫在很遠的地方，之後難以維護
  • 若要修改 class 名稱，必須一個一個修改
.header {
  background: orange;
  
  ul {
    display: flex;
    
    li {
      margin-right: 10px;
      
      a {
        display: block;
        padding: 10px;
        color: #fff;
        text-decoration: none;
        font-style: 18px;
      }
    }
  }
}

Sass 其功類似 JSON 的 巢狀結構 寫法，有以下優點：

  • 若要複製 header class，只要從最外層選擇 header class 即可，不會再遺漏某些 selector
  • 若其他人要替 header class 增加 selector，也會集中寫在 header class 內，不會寫在離 header class 很遠的地方
  • 若要修改 class 名稱，只需改一次 header class 即可

不過 巢狀結 構也有其缺點：

  • 結構不適合寫太深，會失去可讀性，將來也不好維護，比較好的方式是配合 BEM 命名規則，只寫一層巢狀，無論 element 多深，都統一只寫一層

現在最新 CSS 也支援 巢狀結構，但在這之前，Sass 是唯一可支援 巢狀結構 方式

變數

.header a {
  color: #000;
}

.menu a {
  color: blue
}

.footer a {
  color: #000;
}

.nav a {
  color: blue
}
  • 傳統 CSS 會將 顏色 直接寫在樣式內，但若日後要修改顏色，必須一個一個修改
$link-color-1: #000;
$link-color-2: blue;
  
.header{
  a {
    color: $link-color-1;
  }
}

.menu {
  a {
    color: $link-color-2;
  }
}

.footer {
  a{
    color: $link-color-1
  }
}

.nav {
  a{
     color: $link-color-2
  }
}
  • Sass 可自行定義 變數，將來若要修改 顏色，只要改 變數 一次即可

現在最新 CSS 也支援 變數，但 CSS 的變數為 執行時期變數，而 Sass 為 編譯時期變數，各有其使用場合

引用檔案

@import "vars.css";
@import "reset.css";
@import "baseof.css";
@import "home.css";
@import "single.css";
@import "list.css";
@import "_partials/header.css";
@import "_partials/footer.css";
@import "page/about.css";
  • 傳統 CSS 雖然也有 @import，但會每個 CSS 檔案都有獨立 request，執行效率不高
@use 'vars';
@use 'reset';
@use 'baseof';
@use 'home';
@use 'single';
@use 'list';
@use '_partials/header';
@use '_partials/footer';
@use 'page/about';
  • Sass 會將每個 SCSS 檔案整合成單一 main.css，不會影響執行效率

LibSass 仍使用 @import，Dart Sass 則改用 @use

Conclusion

  • 若要使用 巢狀結構，變數 與 引用檔案，其實 Hugo 內建的 LibSass 即可，也就是說若沒特別要使用其他 Sass 新功能，Hugo 內建的 LibSass 就非常夠用，不用再另外安裝 Dart Sass

# Sass