跳到工具区
Web 开发

LESS 在线格式化工具

格式化 LESS 变量、mixin、嵌套选择器和规则，不执行编译，也不生成 CSS。

在线工具 价格方案
输入0 个字符
结果0 个字符
就绪

想要更顺手的原生工作流？

把「LESS 在线格式化工具」放到一个快捷键里。

DevSexy Mac 版保留同样私密的本地处理，同时提供全局快捷键；不用管理浏览器标签页，需要时直接呼出。

全局快捷键可离线使用本地处理
免费试用 Mac 版

当前浏览器工具仍然免费。

先识别语言特征，再整理代码

从真正属于 LESS 的语法结构读懂源码。

变量只是最显眼的一项。参数化 mixin、guard 条件、detached ruleset 和 map lookup 共同构成 LESS 自己的语法，也带来不同于普通 CSS 的格式化错误边界。

@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

    可传入参数并调用的规则集

  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 编译器在收到具体调用时，才会计算 guard 并决定采用哪一条。

Detached ruleset · 作用域与使用方式

Ruleset 可以先作为数据保存，再决定是否产生输出。

@card-base: {
  padding: 16px;
  border-radius: 8px;
};
保存@card-base 本身不会输出 CSS
调用@card-base(); 会引入其中的声明
读取@config[primary] 读取 map 中的值
作用域定义位置和调用方上下文都可能影响结果

进入代码评审前的四个阶段

真正有用的终点是稳定源码，而不是虚假的编译结论。

1

压缩状态

难以阅读和评审

2

完成格式化

统一空格、换行和嵌套

3

解析通过

语法无需容错即可被接受

4

稳定源码

可进入评审或交给其他工具编译

根据语言特征选择正确解析器

LESSparser: less

@variables · when guard · detached ruleset

CSSparser: css

浏览器原生声明与 at-rule

SCSSparser: scss

$variables · 插值 · @use 模块

运行可复现的实例

整理 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 解析器整理 Sass 变量、嵌套、Mixin 和模块语法，输出稳定可审查的 .scss 源码，不执行编译。

文本 Diff 对比

在浏览器本地按行、词或字符比较两段文本，并清楚记录忽略规则与输出格式。

在 DevSexy Mac 应用中重复处理

反复处理本地数据时，可通过 Option 快捷键打开原生应用，离线使用工具。

直接回答

什么是 LESS 在线格式化工具？

在线格式化 LESS 源码，用正确解析器保留变量、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、浏览器支持和实际状态；格式化只表明当前解析器能读取和打印源码。