Less Formatter
Format Less stylesheets — variables, guarded mixins, namespaces and detached rulesets — with Prettier.
Your Less
Formatted Less
Less remains the styling layer of an enormous amount of software that is still in production — Bootstrap 3 themes, Ant Design customisations, older Ember and Rails front ends, and countless internal admin panels. Those codebases are typically maintained rather than actively developed, which means they are edited occasionally by whoever is available, with whatever editor settings they happen to have. The formatting decays accordingly.
This page runs Prettier 3.9.6 with its Less parser, in your browser. As with every Prettier target, the file is parsed and reprinted from the tree, so existing line breaks and alignment are replaced rather than adjusted. The result is deterministic: the same input always produces the same output, which is what makes a legacy stylesheet diffable again.
How to use the less formatter
- 1
Paste your Less source
Paste, drop a
.lessfile, or use Upload File. Files whose@importrules point at other files are fine — imports are not resolved or followed, so nothing needs to be available. - 2
Choose indentation
Two spaces, four spaces or tabs. Four spaces is common in older Less codebases, since that was the Bootstrap 3 house style; two matches most modern configurations.
- 3
Copy or download the formatted file
Copy Less puts plain text on the clipboard; Download Less saves a
.lessfile. Diff the before and after if you are committing a whole-file reformat, so the review can be split from the behavioural change.
The Less-specific syntax it handles
Less overloads the @ sigil in a way that is genuinely tricky to parse, and the Less parser is built for it:
- Variables versus at-rules.
@brand: #3b5bfd;is a variable declaration while@mediais an at-rule, and the two are told apart correctly. So are variable references inside selectors and values. - Variable variables. The indirection form
@@name, where the value of one variable is used as the name of another. - Mixin calls and definitions. Both the classic
.mixin;form and the parenthesised.mixin();call, with arguments, default values and the@rest...parameter. - Guards.
whenclauses on mixins and CSS guards on selectors, including comparison operators andand/notcombinators. - Namespaces. The
#helpers() { … }namespace block and the#helpers.truncate();lookup form. - Detached rulesets. Assigning a block to a variable with
@ruleset: { … };and calling it with@ruleset();. - Escaping and interpolation. The escape form
~"(min-width: 48rem)", which passes a string through untouched, and@{name}interpolation in selectors, property names and URLs. - Import options.
@import (reference),(css),(once),(optional)and the rest of the modifier list.
Arithmetic and colour functions are left alone
Less expressions such as (@radius / 2), @base * 1.5, darken(@brand, 12%) and fade(#101828, 12%) are formatted, not evaluated. The formatter has no idea what @brand holds, and computing the result would require running the Less compiler with your full import graph.
That matters for one well-known trap. Division in Less changed behaviour across versions and depends on the strictMath setting, which is why so much older Less wraps division in explicit parentheses. The formatter preserves your parentheses exactly as written rather than tidying them away, because removing a pair could change how the expression is interpreted by the compiler.
Operations inside calc() are likewise untouched. Less and CSS both attach meaning to the spaces around + and - inside calc(), and those spaces are preserved.
Formatting is not compilation or validation
This page does not compile Less to CSS, resolve imports, evaluate mixins or check that the mixins you call exist. A guard whose condition can never be true, a call to a namespace that was never defined, or a variable used before assignment will format cleanly and still fail at build time. Only syntax errors are caught, and those come back with a line and column.
There is also no linting, no autoprefixing and no transpilation of modern CSS features for old browsers. If you need vendor prefixes, that is Autoprefixer inside your build.
The whole operation runs client-side in a Web Worker. Nothing is uploaded, which is the usual reason to prefer a browser tool for stylesheets belonging to internal systems.
Less Formatter FAQ
Does this convert Less to CSS?
No. Less in, formatted Less out. Compiling requires the lessc compiler and every file referenced by your imports. This tool only reprints the source you paste.
Can I use it on SCSS?
No — the dialects diverge in ways the parser cares about, starting with $variable versus @variable and continuing through mixin syntax and control directives. Use the SCSS formatter for Sass files.
Are escaped values like ~"…" preserved?
Yes. The tilde escape form is parsed as a Less string literal and the content between the quotes is passed through unchanged, which is essential for media query fragments and IE-era hacks that are not valid CSS on their own.
Why does the output look different from my old formatter?
Prettier applies its own printing rules rather than preserving yours, so a first reformat of a legacy file often produces a large diff. Commit that reformat on its own, separate from any behavioural change, and every diff afterwards will be small.
Does it check that my mixins and variables exist?
No. There is no linting and no evaluation, so a call to a mixin that was never defined, a variable used before assignment, or an @import pointing at a missing file all format cleanly and then fail when you compile. Only syntax errors are caught here, and those are reported with a line and column.
Is my stylesheet uploaded anywhere?
No. Prettier standalone runs as JavaScript in a Web Worker in your browser, so the file never leaves your device. That is worth knowing for the internal admin themes that make up most surviving Less code.