LESS Formatter
Clean up messy LESS stylesheets with consistent indentation and spacing using Prettier's LESS parser, entirely in your browser.
Example
Messy LESS in:
.box{color:@brand;.inner{margin:0;&:hover{color:red;}}}Formatted out:
.box {
color: @brand;
.inner {
margin: 0;
&:hover {
color: red;
}
}
}How it works
Paste your LESS code into the input pane and click Format (or it formats live as you type). It runs Prettier's LESS parser locally and prints tidy output you can copy.
Good to know
The LESS Formatter takes a block of LESS (Leaner Style Sheets) source and re-prints it with consistent two-space indentation, normalized spacing around braces and colons, and one declaration per line. It is built for front-end developers, theme authors, and anyone maintaining a Bootstrap-era or legacy LESS codebase who has inherited compressed, hand-edited, or inconsistently styled stylesheets. Everything happens locally through Prettier's LESS parser, so the code in your input pane is never transmitted anywhere.
Reach for it when you have pasted LESS from a minified build, a Slack snippet, or a diff where the original formatting was lost, and you want a readable, review-ready version. It is equally handy for enforcing a single house style across a team before committing, or for quickly sanity-checking that a mixin or nested rule is balanced. Because it formats live as you type and also on the Format button, you can iterate on a fragment without setting up a build pipeline.
Reading the result is straightforward: nesting depth maps directly to indentation, so a hover state nested inside .inner inside .box sits three levels deep. The character count in the status line ("Formatted N chars.") simply confirms a successful pass; an "Error:" message means the parser hit a syntax problem and the first line of that message points you at the offending token. Note these things the formatter does and does not touch:
- It preserves LESS-specific syntax verbatim: variables like
@brand, parametric mixins like .btn(@c), mixin calls, and the & parent selector all stay intact. - It does not evaluate or compile anything, so functions such as
darken(@brand, 10%) are left as written rather than resolved to a hex value.
One practical caveat: formatting is also a syntax check in disguise. If the output pane goes blank and an error appears, the tool found unbalanced braces or an unparseable construct rather than failing silently, which makes it a quick way to catch a missing }. If you actually need compiled CSS rather than tidy LESS, use a dedicated LESS-to-CSS tool instead; this one stops at beautification.
Frequently asked questions
Does this compile LESS to CSS?
No. It only formats and beautifies LESS source code, preserving variables, mixins, and nesting. To compile LESS to CSS, use a LESS compiler tool instead.
Is my LESS code sent to a server?
No. Formatting runs entirely in your browser using Prettier's LESS parser, so your code never leaves your machine.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
What is the difference between a LESS formatter and a LESS compiler?
A formatter only rewrites the source for readability, keeping variables, mixins, and nesting as LESS. A compiler evaluates that LESS and outputs plain CSS with all variables and functions resolved. This tool is a formatter, not a compiler.
Does formatting LESS change how the stylesheet behaves?
No. Formatting only adjusts whitespace, indentation, and line breaks, which CSS and LESS ignore. The resulting styles compile to exactly the same CSS as the unformatted version.
What indentation does this LESS formatter use?
It uses two spaces per nesting level, applied by Prettier's LESS parser. Each level of nested selectors or rules adds one more two-space indent.
Can I format LESS that contains syntax errors?
No. If the LESS cannot be parsed, the output stays empty and the status line shows an error with the first problem it found, so you can use it to spot issues like an unbalanced brace.
Will the formatter resolve LESS functions like darken() or lighten()?
No. Color and math functions are left exactly as written because the tool does not evaluate LESS; resolving them requires compiling the LESS to CSS.
Can this format plain CSS or SCSS as well as LESS?
It is configured specifically for the LESS parser. Plain CSS usually formats fine since LESS is a superset, but SCSS uses different syntax, so you should use an SCSS or CSS formatter for those.
Does the LESS formatter work offline?
Yes. Once the page and its Prettier scripts have loaded in your browser, formatting runs entirely on your device and continues to work without an internet connection.
Related tools