LESS Formatter

A LESS formatter that keeps your source intact

This LESS formatter reformats .less files with Prettier's LESS parser. It changes layout only: variables stay variables, mixins stay mixins, and nested rules stay nested. That distinguishes it from a compiler, which turns LESS into plain CSS. Use this page to tidy source files you keep in a repository, and the LESS Compiler when you need the CSS output.

LESS is still found in many long-lived code bases: Bootstrap 3 themes, Ant Design 4 projects, Semantic UI customizations and in-house design systems from the 2010s. Consistent formatting makes such files easier to maintain or to migrate later.

Example

@import (reference) 'mixins.less';@brand:#0f766e;.bordered(@w:2px){border:@w solid @brand}.card{.bordered(1px);padding:@gap*2;&-title{font-weight:600}@media(min-width:768px){padding:@gap*3}}

@import (reference) "mixins.less";
@brand: #0f766e;
.bordered(@w:2px) {
  border: @w solid @brand;
}
.card {
  .bordered(1px);
  padding: @gap*2;
  &-title {
    font-weight: 600;
  }
  @media (min-width: 768px) {
    padding: @gap*3;
  }
}

Each variable declaration and each declaration inside a rule gets its own line. The mixin definition .bordered(@w:2px) and the call .bordered(1px); are recognized and kept exactly. The &-title parent selector (BEM-style suffix) is nested under .card. The media query gains a space after @media. Arithmetic such as @gap*2 is printed as written; Prettier deliberately does not insert spaces around operators in LESS because in some contexts that would change the meaning.

LESS features the formatter understands

• Variables (@name: value;), variable interpolation in selectors and properties (.@{prefix}-btn), and property accessors ($color in LESS 3+).
• Mixins with parameters and defaults, !important after calls, and namespaces like #theme.button();.
• Guards such as .mixin(@a) when (lightness(@a) >= 50%).
• Operations and functions: darken(), fade(), percentage(), escaping with ~"...".
• Import options: (reference), (css), (optional).
• Detached rulesets and :extend().
• Both /* block */ and // line comments.

Options

Indent defaults to 2 spaces, as used in Bootstrap 3's LESS sources and most LESS projects. Line width wraps long selector lists and comma-separated values. Quotes in @import are normalized to double quotes.

LESS and SCSS syntax compared

Because any class can act as a mixin in LESS, a line like .bordered(1px); inside a rule is a mixin call, not a selector. The formatter recognizes this and keeps it as a single statement.

LESS style tips

• Keep nesting shallow (three levels or fewer). Deep nesting compiles to long, highly specific selectors that are hard to override.
• Define variables and mixins in separate files and import them with (reference) so unused mixin output is not emitted.
• Wrap division in parentheses, (@width / 2). Since LESS 4, division outside parentheses is left as a literal slash by default, which is a frequent source of surprise when upgrading.

Common errors

• "CssSyntaxError: Unknown word" – often a missing semicolon after a mixin call or variable declaration.
• Unclosed block – one { too many; the line in the error is where the block opens.
• JavaScript evaluation with backticks is legacy syntax; it formats, but modern LESS compilers disable it by default.

To migrate a LESS code base to Sass, try LESS to SCSS. Formatting runs entirely in your browser.