固定使用 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 語法樣本
Parser 能辨識語法,不代表編譯器已驗證語意
固定的 SCSS 語法能保留這些 token 並重新排版;它不會解析專案依賴,也不保證每段 SassScript 都能通過 Dart Sass。
$brand: #c3caed;辨識 SassScript 變數寫法,不計算值或型別PASS// 僅供原始碼維護的說明SCSS 接受、標準 CSS 不接受的單行註解PASS@use "tokens" as t;只辨識並排版 at-rule,不解析模組路徑或公開成員PASS.icon-#{$size}保留動態選擇器或屬性文字,不展開結果PASS@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 編譯或專案檢查。
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"