Formatters
LESS Formatter
Prettier for LESS — @variables, mixins and nested rules in canonical style.
In short
Format LESS online with prettier: @variables, nesting, mixins and guards consistently styled with exact syntax-error positions. Free, in-browser.
By NaveenKumar T · Updated
Learn: Sass vs SCSS vs LESS vs Stylus: Choosing a CSS Preprocessor
- Real CSS parsing
- Exact error positions
- Choose your indentation
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
LESS Formatter: input and output
A form stylesheet with three @variables squeezed onto one line, a guarded mixin, nested input,select rules and a media query inside the block.
@input-border:#cbd5e1;@brand:#2563eb;@gap:12px;
// Focus ring mixin, guarded so it only accepts colours
.focus-ring(@color) when (iscolor(@color)){outline:2px solid fade(@color,40%);outline-offset:2px}
.form{display:grid;gap:@gap;
label{font-size:14px;font-weight:600}
input,select{padding:@gap/2 @gap;border:1px solid @input-border;border-radius:6px;
&:focus{.focus-ring(@brand);border-color:@brand}
}
.actions{display:flex;gap:@gap;justify-content:flex-end}
@media (max-width:640px){grid-template-columns:1fr}
}@input-border: #cbd5e1;
@brand: #2563eb;
@gap: 12px;
// Focus ring mixin, guarded so it only accepts colours
.focus-ring(@color) when (iscolor(@color)) {
outline: 2px solid fade(@color, 40%);
outline-offset: 2px;
}
.form {
display: grid;
gap: @gap;
label {
font-size: 14px;
font-weight: 600;
}
input,
select {
padding: @gap / 2 @gap;
border: 1px solid @input-border;
border-radius: 6px;
&:focus {
.focus-ring(@brand);
border-color: @brand;
}
}
.actions {
display: flex;
gap: @gap;
justify-content: flex-end;
}
@media (max-width: 640px) {
grid-template-columns: 1fr;
}
}
The three variables separate onto their own lines, the when guard and the .focus-ring(@brand); call survive untouched, fade(@color,40%) gains a space after the comma and @gap/2 becomes @gap / 2 — and the // comment is preserved, which a plain CSS parser would reject.
Learn more
Formatting LESS stylesheets
LESS adds @variables, nesting, mixins and operations on top of CSS — syntax a plain CSS formatter rejects. Prettier's LESS parser formats it natively: nested blocks indent correctly, mixin calls keep their guards, and operations stay readable.
Legacy LESS codebases (Bootstrap 3 era and countless internal apps) still need maintenance; a canonical format pass is the cheapest readability upgrade they can get.
Maintaining LESS in an SCSS world
LESS rarely gets greenfield projects anymore, which makes formatting matter more, not less: the codebases that remain are old, large, and touched infrequently — exactly the conditions where inconsistent style compounds into unreadability. A canonical format pass before each maintenance session re-baselines the file, makes your actual change reviewable in isolation, and costs nothing because formatting is semantics-preserving.
When the team is ready to migrate, the CSS preprocessor converter handles the sigil-and-syntax translation file by file, and LESS to CSS compiles a sheet outright with less.js when the goal is to retire the preprocessor. Formatted input converts more predictably either way, so format first, then convert.
Help
Frequently asked questions
Everything you need to know about the LESS Formatter.
01How do I use the LESS Formatter?
Paste your LESS (or load a file/URL) and press Format. Prettier's LESS-aware parser re-prints @variables, nested rules, guards and mixin calls in canonical style, reporting the exact position of any syntax it can't get past.
02Can this convert my LESS to CSS too?
This page formats LESS as LESS. For conversion, use the dedicated LESS to CSS converter — it resolves simple variables and flattens nesting on top of formatting.
03Does the formatter understand LESS-only syntax like guards, escapes and interpolation?
Yes — it runs prettier's LESS parser, not a CSS parser with LESS bolted on. Mixin definitions with when guards, mixin calls such as .focus-ring(@brand);, ~"…" escaped strings, @{name} interpolation and // line comments are all preserved in place. Spacing is normalized where LESS is unambiguous: fade(@color,40%) becomes fade(@color, 40%), @gap/2 becomes @gap / 2, and selector lists like input,select split one per line. Nested rules and @media blocks inside a rule indent at your chosen width.
Keep working
Related tools
LESS to CSS
less.js itself, running in your browser — mixins expanded, guards evaluated, colour functions computed.
SCSS Formatter
Formatters
CSS Formatter
One stylesheet workspace, three engines: prettier for canonical formatting, js-beautify for unminifying broken bundles, and a minifier for the compact form — pick the mode in the rail.
CSS Preprocessor Converter
One page for every cross-dialect trip — LESS, SCSS, indented Sass and Stylus, in any of the twelve directions.
Markdown Formatter
Formatters
PHP Formatter
Formatters