跳到工具區
Web 開發

SCSS 格式化工具

在瀏覽器本機使用固定的 SCSS parser 整理變數、巢狀規則、mixin 與模組語法；只重新排版 .scss，不編譯成 CSS。

線上工具 價格方案
輸入0 個字元
結果0 個字元
就緒

想要更順手的原生工作流程？

把「SCSS 格式化工具」放進一個快速鍵。

DevSexy Mac 版保留同樣私密的本機處理，同時提供全域快速鍵；不用管理瀏覽器分頁，需要時直接叫出。

全域快速鍵可離線使用本機處理
免費試用 Mac 版

目前的瀏覽器工具仍然免費。

固定使用 SCSS parser · 原始碼進，原始碼出

只整理 .scss，不編譯，也不執行 SassScript。

SCSS、縮排式 Sass 與 CSS 彼此相關，卻不是同一套語法。本頁固定解析大括號式 .scss；parser 能攔下部分結構錯誤，但不會載入模組、執行運算或證明 Dart Sass 一定能編譯。

SCSS

本工具固定使用

大括號與分號語法 · .scss

$gap: 1rem;
.card { padding: $gap * 2; }

Sass

此頁無法切換

縮排式語法 · .sass

$gap: 1rem
.card
  padding: $gap * 2

CSS

沒有 SassScript

瀏覽器樣式表 · .css

.card {
  padding: 2rem;
}
本頁只做格式化：不編譯 SCSS、不做型別檢查，也不執行變數、函式、mixin、迴圈或其他 SassScript。

SCSS 語法樣本

Parser 能辨識語法，不代表編譯器已驗證語意

固定的 SCSS 語法能保留這些 token 並重新排版；它不會解析專案依賴，也不保證每段 SassScript 都能通過 Dart Sass。

$variables$brand: #c3caed;辨識 SassScript 變數寫法，不計算值或型別PASS
// 註解// 僅供原始碼維護的說明SCSS 接受、標準 CSS 不接受的單行註解PASS
@use / @forward@use "tokens" as t;只辨識並排版 at-rule，不解析模組路徑或公開成員PASS
插值.icon-#{$size}保留動態選擇器或屬性文字，不展開結果PASS
Mixin@include stack($gap);保留呼叫形式，不尋找或執行 mixin 定義PASS
巢狀規則&:hover { color: $brand; }整理父選擇器與巢狀區塊PASS

格式化 ≠ 編譯

輸出仍是 SCSS 原始碼，不是瀏覽器可執行的 CSS。

工具只讓空格、縮排與換行更一致；不讀取專案檔案、不解析模組關聯，也不執行 SassScript。

會做 · 格式化

$gap:1rem;.card{padding:$gap*2}

↓ FORMAT

$gap: 1rem;
.card {
  padding: $gap * 2;
}
  • 以固定的 SCSS parser 解析大括號式 .scss
  • 依選項整理 2／4 空格或 Tab 與偏好的 print width
  • 回傳格式化原始碼，或顯示 parser 的錯誤訊息

不會做 · 編譯與驗證

NO CSS EMISSION

  • 載入或解析 @use、@forward 的檔案與命名空間
  • 執行或型別檢查變數、函式、mixin、條件與迴圈
  • 輸出 CSS，或驗證 cascade、相容性與畫面結果

Parser 錯誤診間

結構解析錯誤與 Sass 編譯錯誤是兩回事。

未關閉的區塊會讓 parser 停止並顯示訊息與原始碼片段；但部分不完整的 SassScript 仍可能被排版，必須再交給 Dart Sass 編譯或專案檢查。

CssSyntaxError · Unclosed block（1:1）
1  .grid {
2    gap: $gap;
3    .item {
4      width: 100%;
5    }
     ^ 尚缺最外層右大括號

最外層 .grid 少了右大括號。Prettier 訊息通常含行列與原始碼片段，但本站的結構化 line／column 欄位不一定另有值；修好結構後仍需用 Dart Sass 驗證編譯語意。

跨環境一致

版本與選項都對齊，輸出才可能一致。

瀏覽器

本頁使用 Prettier 3.9.6 與 SCSS parser，選項由畫面明確指定

縮排與換行

可選 2／4 空格或 Tab；print width 是偏好值，不是硬性字數上限

編輯器

另行對齊 Prettier 版本與 SCSS parser，並核對專案設定

CI

在專案中設定並執行 prettier --check "**/*.scss"

執行可重現的範例

格式化 SCSS 巢狀和 mixin 呼叫，輸出仍然是 SCSS。

使用範例會替換目前輸入、參考輸入、操作與選項。以下均為公開示範資料。

縮排巢狀懸停規則

使用兩個空格縮排，保留變數與父選擇器。

輸入

$brand:#7c3aed;.button{color:$brand;&:hover{opacity:.8}}

小數統一為 0.8；結果不是編譯後的 CSS。

$brand: #7c3aed;
&:hover {
opacity: 0.8;

格式化 mixin 定義與呼叫

定義 gap mixin，並在 grid 規則中 include。

輸入

@mixin gap($n){gap:$n}.grid{@include gap(1rem)}

格式化結果保留定義和呼叫，不會展開執行。

@mixin gap($n)
@include gap(1rem);

繼續處理相關任務

CSS 格式化、美化與壓縮工具

在瀏覽器本機格式化、檢查或壓縮 CSS，並清楚區分保守壓縮與 CSSO 結構重整。

LESS 程式碼格式化工具

在瀏覽器本機整理 LESS 變數、mixin、巢狀選擇器與規則；只重新排版，不編譯或產生 CSS。

文字 Diff 比對

在瀏覽器本機依行、詞或字元比對兩段文字，並清楚標示檢視方式、忽略規則與複製輸出格式。

在 DevSexy Mac 應用程式中重複處理

反覆處理本機資料時，可透過 Option 快捷鍵開啟原生應用程式，離線使用工具。

直接回答

什麼是 SCSS 格式化工具？

線上以 Prettier SCSS parser 整理 .scss，可選 2／4 空格或 Tab 與 80／100／120 print width；原始碼在瀏覽器本機處理，只格式化、不編譯 CSS 或執行 SassScript。

它能做什麼？

  • 格式化

如何使用 SCSS 格式化工具

  1. 01

    準備輸入

    貼上包含變數和巢狀規則的 SCSS。

  2. 02

    選擇操作

    設定縮排與換行寬度，然後格式化。

  3. 03

    核對結果

    使用 Sass 工具鏈編譯，另行核對實際產生的 CSS。

常見問題

格式化會把 SCSS 編譯成 CSS 嗎？
不會。工具只解析和列印 SCSS，保留變數、mixin 與巢狀；不會解析專案匯入或執行 Sass 編譯器。
為什麼 .8 變成了 0.8？
列印器使用統一的數字表示。應檢查格式化差異；原始碼排版不等於瀏覽器渲染或編譯輸出已經驗證。
會讀取匯入的檔案嗎？
不會。此操作在瀏覽器中處理你提供的文字，不會獲取或解析專案 import，完整構建仍應交給原工具鏈。