Tools
LESS Code Formatter
Paste your LESS code and click Format to clean it up with Prettier. Tab size and (for JS/TS) trailing semicolons are configurable. Switch languages from the toolbar.
About the LESS formatter
This tool reformats LESS source: indentation, spacing around selectors and declarations, quote style, and how multi-selector rules break onto separate lines. It does not compile LESS — @variables, mixins, nesting, and math expressions like (100px + 50px) / 2 are left exactly as written; only the surrounding syntax is normalized. Paste in a stylesheet with inconsistent tabs, missing spaces, or single-quoted strings, and get back the same LESS, cleanly and consistently formatted.
Formatting runs on Prettier 3's standalone build (prettier/standalone) rather than its Node build, so everything happens client-side with no fs access — nothing you paste is sent to a server. The parser is Prettier's postcss-based plugin, the same one behind this site's CSS and SCSS formatters; only the parser option passed to it differs. Prettier and that plugin load dynamically the moment you click Format, so visiting this page doesn't download the HTML or PHP formatter's code along with it.
Reach for this when you're cleaning up LESS pulled from an old codebase, reviewing a diff full of whitespace noise, or standardizing a stylesheet before a review — without installing Prettier locally or wiring it into a build step. It also doubles as a quick syntax check: an unclosed brace or stray character surfaces as a parse error with a line and column instead of silently breaking a build later. For formatting a whole project on every commit, use Prettier's CLI (prettier --write) or a pre-commit hook instead — this page is built for one-off pastes.
Examples
// input
@primary: #4d4d4d;
.card{
background:@primary;
.title{font-size:18px;}
}
// output
@primary: #4d4d4d;
.card {
background: @primary;
.title {
font-size: 18px;
}
}Extra spaces collapse to one, braces get consistent spacing, and each nested rule is reindented two spaces deeper — but @primary itself is untouched, since Prettier formats syntax, not values.
// input
@gutter: 20px;
.box { width: (100px + 50px) / 2; margin: 10px @gutter; }
// output — same math, just reformatted
@gutter: 20px;
.box {
width: (100px + 50px) / 2;
margin: 10px @gutter;
}(100px + 50px) / 2 is not reduced to 75px, and @gutter is not substituted — a real LESS compiler evaluates expressions like this; this formatter only reformats the syntax around them.
# In a Node project Prettier detects .less by extension —
# no plugin flag needed (this browser tool loads the
# postcss plugin explicitly instead).
npx prettier --write "src/**/*.less"
# This only formats. To compile LESS to real CSS:
npx lessc src/styles.less dist/styles.cssPrettier's Node/CLI build auto-detects .less by file extension; this page uses the browser standalone build instead, which is why the parser and plugin are named explicitly in the code.
Frequently asked questions
Does this tool compile LESS into CSS, or only format it?
It only formats syntax — reindenting, respacing, and normalizing quotes. @variables, mixins, and math like (100px + 50px) / 2 are left exactly as written; nothing is evaluated. To get compiled CSS you need a real LESS compiler, such as the lessc CLI or a bundler's LESS loader.
Does this LESS formatter send my code to a server?
No — formatting runs entirely in your browser. Prettier's standalone build and its CSS/LESS/SCSS plugin load on demand and execute locally; the code you paste is never uploaded or logged.
Does the formatter strip or rewrite comments?
No. Both block comments (/* ... */) and LESS's line comments (// ...) are kept exactly as written; only whitespace, indentation, and quote style change.
What happens if my LESS has a syntax error?
Prettier reports a parse error with the exact line and column instead of guessing — for example, an unclosed { produces a message like CssSyntaxError: Unclosed block (1:1).
Why isn't there a Semicolons toggle, like on the JavaScript formatter?
CSS and LESS declarations always end in a semicolon in Prettier's output — there's no valid variant without one, unlike JavaScript. That toggle only appears on this site's JavaScript and TypeScript formatters, where omitting semicolons is valid syntax.