LESS Formatter
LESS Input
Formatted LESS
技术详情
Less 格式化器的工作原理
工具功能
Less 格式化器可美化 Less CSS 预处理器代码,使其符合一致的代码风格标准。工具自动处理缩进、换行、空格和属性排序。支持格式化 Less 特有的语法特性:变量(@variable-name)、混合(Mixin .border-radius())、嵌套规则(父选择器 & 引用)、运算(加减乘除)、颜色函数(darken、lighten、fade 等)和导入语句(@import)。压缩模式则移除所有空白字符和注释,生成最小化的 CSS 输出。
常见开发者使用场景
Less 核心特性与格式化规则
格式化器需要特殊处理的 Less 特性:
- 变量:@variable: value; 保持变量声明与值的间距一致,嵌套变量保持上下文缩进
- Mixin:.mixin(@arg: default) { ... } 的参数列表格式化,`!important` 关键字的处理
- 嵌套规则:保持嵌套层级清晰,&:hover、&.active 等父选择器引用的正确缩进
- Guard 表达式:.mixin when (@condition) 的条件语句格式化
常见陷阱与注意事项
- 深层嵌套:Less 允许任意层级的规则嵌套,但过深的嵌套(>4 层)会导致 CSS 选择器过于具体、难以覆盖。格式化器会忠实呈现嵌套结构,不会自动展平。
- Mixin 调用差异:Less 中 Mixin 调用不带括号也可执行,这与 SCSS 不同。格式化时需保持原样或统一为带括号风格。
- 计算表达式:Less 的 calc() 和其他数学运算需区分——calc() 内的表达式使用 CSS 原样传递,而 Less 原生的运算 (10px + 5px) 在编译时计算。
- @import 路径:格式化时不修改 @import 路径,避免破坏项目结构。注意 (reference)、(inline) 等导入选项的保留。
何时使用此工具而非代码
在代码审查前统一格式、快速清理遗留代码、或从压缩文件恢复可读性时使用此工具。对于编辑器中的持续格式化,推荐使用 Prettier 配合插件,或 VSCode 的 Less IntelliSense 扩展提供实时格式化。