跳到工具區
Web 開發

SCSS 格式化工具

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

Web Worker 僅在本機處理工具
輸入0 個字元
結果0 個字元
就緒

固定使用 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 格式化工具?

在瀏覽器本機以 Prettier SCSS parser 整理 .scss,可選 2/4 空格或 Tab 與 80/100/120 print width。只格式化,不編譯 CSS、不執行 SassScript。

它能做什麼?

  • 格式化

如何使用 SCSS 格式化工具

  1. 01

    選擇任務

    在工作區選擇格式化。

  2. 02

    提供輸入

    $brand: #7C3AED; .button { color: $brand; &:hover { opacity: .8; } }。內容會留在瀏覽器端的處理流程中。

  3. 03

    檢查結果

    執行工具、檢查結果與診斷資訊;頁面提供複製或下載功能時,也能直接匯出。

常見問題

SCSS 格式化工具是什麼?
在瀏覽器本機以 Prettier SCSS parser 整理 .scss,可選 2/4 空格或 Tab 與 80/100/120 print width。只格式化,不編譯 CSS、不執行 SassScript。
SCSS 格式化工具能做什麼?
SCSS 格式化工具支援格式化,所有模式都能直接在目前頁面使用。
SCSS 格式化工具會上傳我的資料嗎?
SCSS 格式化工具會在瀏覽器中處理輸入內容。DevSexy 不會增加上傳、登入或伺服器處理步驟。
DevSexy 會在瀏覽器中處理工具輸入:不追蹤貼上的內容、不需帳號,也不會上傳。