LESS Beautifier

LESS Beautifier – Format LESS Stylesheets

LESS adds variables, mixins, guards, and nesting to CSS — syntax that a plain CSS formatter does not understand. The LESS beautifier uses Prettier's LESS parser so every LESS feature is recognized and formatted correctly.

Supported LESS syntax

• Variables (@brand: #d10505;) and variable interpolation (@{prefix}-button).
• Mixins with parameters and default values, !important mixin calls, and namespaces.
• Guards (when (@mode = dark)) on mixins and CSS rules.
• Nested rules with & parent selectors, &:hover, &-suffix.
• Operations and color functions such as darken(), fade(), and math in parentheses.
• @import options, maps, detached rulesets, and @plugin rules.

How it works

Paste your LESS code, choose indentation and line width, and the formatted result appears instantly. Nested blocks are indented one level per depth, each declaration is placed on its own line, and spacing around colons and operators is made consistent. Comments, including // line comments that plain CSS does not allow, are preserved.

Why keep LESS formatted?

LESS files are often edited by many people over years — Bootstrap 3 themes and legacy design systems are prime examples. Inconsistent indentation hides how deep a rule is nested, which leads to selectors far more specific than intended. Formatting makes the structure obvious and keeps diffs small.

Compiling and other formats

This tool formats LESS source; it does not compile it to CSS. When you have compiled CSS, beautify it with the CSS Beautifier or shrink it with the CSS Minifier. Migrating to Sass? The SCSS Beautifier formats the result of your conversion.