關於 Sass／SCSS：兩種語法與專案架構

Sass／SCSS 是用來管理 CSS 的工具與程式語言，透過編譯工具轉成瀏覽器看得懂的 CSS。SCSS 是 Sass 3 引入的新語法，兩種寫法有些不同，但執行順序都是由上而下。

Sass 與 SCSS 寫法

兩者最大的表面差異，是 Sass 省略了分號與大括號。Sass 寫起來較簡潔，但內容很多時只靠縮排會比較難分辨段落。

下面的 SCSS 與 Sass 寫法沒有功能差異，會編譯成相同的 CSS。

mixin 寫法

Mixin 在 SCSS 與 Sass 中的寫法不同。

專案架構

當時用 @import 組成的簡單架構：

_variable.scss   // 變數
_normalize.scss  // 保持乾淨的網站
_mixin.scss      // mixin
_header.scss     // header、footer 等
_page1.scss      // 分頁
_page2.scss
_all.scss        // 所有檔案 import 到這裡

_all.scss 內的寫法：

@import 'variable';

2026 年後記

SCSS 仍是常見語法，但 Sass 官方已用 @use 與 @forward 取代舊式 @import 架構；現行模組方式整理在《Sass 的 @use 與 @forward》。