LESS 程式碼格式化工具是什麼？

在瀏覽器本機以 LESS parser 格式化原始碼，整理變數、mixin、guard、map 與 detached ruleset；只重新排版，不編譯或產生 CSS。

LESS 程式碼格式化工具能做什麼？

LESS 程式碼格式化工具支援格式化，所有模式都能直接在目前頁面使用。

LESS 程式碼格式化工具會上傳我的資料嗎？

LESS 程式碼格式化工具會在瀏覽器中處理輸入內容。DevSexy 不會增加上傳、登入或伺服器處理步驟。

LESS 格式化線上工具 — 只排版變數、Mixin 與巢狀語法

辨識 LESS 語法，不把它當成已編譯 CSS

從真正屬於 LESS 的結構閱讀原始碼。

變數只是第一個線索。參數化 mixin、guard 條件、detached ruleset 與 map lookup 讓 LESS 擁有自己的語法，也形成不同於一般 CSS 的 parser 邊界。

@brand: #d97706;
@space: { sm: 8px; md: 16px; };

.btn(@pad; @bg) when (@pad > 0) {
  padding: @pad;
  background: @bg;
}

.icon(@name) {
  width: @space[@name];
}

@card-base: { border-radius: 8px; };

1@ 變數
主題 token 與屬性值
2參數化 mixin
可帶參數呼叫的 ruleset
3Guard · when
帶條件的 mixin 定義
4Map lookup
用方括號讀取 ruleset map
5Detached ruleset
存成變數值的規則集

Guarded mixin · 概念判斷流程

格式化只排出分支，不會執行條件。

.badge(@tone) when (@tone = primary) { color: white; }
.badge(@tone) when (@tone = neutral) { color: #111; }

呼叫

.badge(primary)

條件 1

@tone = primary?

符合

第一個 guarded 定義

後續

繼續檢查，或沒有任何符合項目

格式化工具只解析並重新排版兩個定義。只有 Less compiler 收到具體呼叫時，才會計算 guard 並決定採用哪一個。

Detached ruleset · 作用域與使用方式

Ruleset 可以先存成值，是否輸出則由編譯時的使用方式決定。

@card-base: {
  padding: 16px;
  border-radius: 8px;
};

保存@card-base 單獨定義時不會自行輸出 CSS

呼叫@card-base(); 會帶入其中的宣告

查找@config[primary] 讀取 map 中的值

作用域定義位置與呼叫端情境都可能影響編譯結果

進入程式碼審查前的四個階段

有用的終點是可檢閱的原始碼，不是假裝已完成編譯。

原始排版

不容易快速掃讀與審查

完成格式化

依選項整理空白、換行與巢狀結構

Parser 接受

只代表 Prettier parser 能重新列印

待編譯原始碼

仍須交由專案的 Less compiler 與測試確認

從語法特徵選擇正確的 parser

LESSparser: less

@variables · when guard · detached ruleset

CSSparser: css

瀏覽器原生宣告與 at-rule

SCSSparser: scss

$variables · interpolation · @use modules

LESS 程式碼格式化工具

從真正屬於 LESS 的結構閱讀原始碼。

格式化只排出分支，不會執行條件。

Ruleset 可以先存成值，是否輸出則由編譯時的使用方式決定。

有用的終點是可檢閱的原始碼，不是假裝已完成編譯。

從語法特徵選擇正確的 parser

什麼是 LESS 程式碼格式化工具？

它能做什麼？

如何使用 LESS 程式碼格式化工具

選擇任務

提供輸入

檢查結果

常見問題