跳到工具區
Web 開發

LESS 程式碼格式化工具

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

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

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

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

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

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

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

辨識 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. 1@ 變數

    主題 token 與屬性值

  2. 2參數化 mixin

    可帶參數呼叫的 ruleset

  3. 3Guard · when

    帶條件的 mixin 定義

  4. 4Map lookup

    用方括號讀取 ruleset map

  5. 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 中的值
作用域定義位置與呼叫端情境都可能影響編譯結果

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

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

1

原始排版

不容易快速掃讀與審查

2

完成格式化

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

3

Parser 接受

只代表 Prettier parser 能重新列印

4

待編譯原始碼

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

從語法特徵選擇正確的 parser

LESSparser: less

@variables · when guard · detached ruleset

CSSparser: css

瀏覽器原生宣告與 at-rule

SCSSparser: scss

$variables · interpolation · @use modules

執行可重現的範例

整理 Less 變數與參數化 mixin，不對它們求值。

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

格式化變數與懸停規則

使用兩個空格縮排，保留 @brand 引用。

輸入

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

輸出仍為 Less，巢狀父選擇器保持不變。

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

格式化帶參數的 mixin

card 規則向 .rounded 傳入 8px。

輸入

.rounded(@r){border-radius:@r}.card{.rounded(8px)}

呼叫仍是 mixin，不會展開為 CSS 宣告。

.rounded(@r)
.rounded(8px);

繼續處理相關任務

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

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

SCSS 格式化工具

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

文字 Diff 比對

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

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

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

直接回答

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

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

它能做什麼？

  • 格式化

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

  1. 01

    準備輸入

    貼上包含變數或 mixin 定義的 Less。

  2. 02

    選擇操作

    設定縮排和換行寬度，再格式化。

  3. 03

    核對結果

    使用 Less 編譯器解析匯入，並檢查產生的 CSS。

常見問題

此工具會把 Less 轉成 CSS 嗎？
不會。它用解析器和列印器整理 Less 原始碼，變數和 mixin 不求值；產生 CSS 仍需 Less 編譯器。
格式化時會解析 import 嗎？
不會載入專案檔案或遠端匯入。import 可以列印，不代表構建系統能夠找到對應檔案。
格式化能確認瀏覽器相容嗎？
不能。需要在應用程式中檢查編譯後的 CSS、瀏覽器支援和實際狀態；格式化只表明目前解析器能讀取和列印原始碼。