LESS Formatter Online — Format LESS Code

Beautify LESS stylesheets with @variables, nested selectors, .mixin() definitions, and parent references using consistent 2-space indentation — 100% in your browser.

Input LESS

Formatted Output

What is a LESS Formatter?

A LESS formatter reformats LESS stylesheets with consistent 2-space indentation, one declaration per line, and proper nesting depth for @variables, nested rules, .mixin() blocks, and parent-selector references. It is the fastest way to clean up LESS exported from a design tool, copied from a Bootstrap theme, or compressed by a build pipeline.

LESS is a CSS preprocessor that adds variables, nesting, mixins, and operations. The OpenFormatter LESS formatter applies the same conventions used by Prettier and stylelint: 2-space indent, opening brace on the selector line, one rule per line. Formatting is purely cosmetic — the lessc compiler produces byte-identical CSS regardless of source whitespace.

How to format LESS — 4 steps

Paste your LESS. Copy a stylesheet, mixin, or rule block into the Input panel. Click Load Sample to try a demo with @variables and nesting.
Click Format. The formatter applies 2-space indentation client-side — no upload.
Review the output. The Output panel shows beautified LESS with one declaration per line and aligned nesting.
Copy the result. Click Copy to paste the formatted LESS into your editor or pull request.

Side-by-side: minified vs formatted LESS

Minified

@primary:#3b82f6;.card{padding:1rem;.title{color:@primary;&:hover{text-decoration:underline;}}}

Formatted

@primary: #3b82f6;

.card {
  padding: 1rem;
  .title {
    color: @primary;
    &:hover {
      text-decoration: underline;
    }
  }
}

LESS-Aware Nesting

Each level of selector nesting adds 2 spaces of indent. Parent selector (&) chains, pseudo-classes, and pseudo-elements are placed on their own lines under the parent.

CSS Output Identical

Formatting only adjusts source whitespace. The lessc and dart-less compilers produce byte-identical CSS from formatted and unformatted input.

Client-Side Only

Stylesheets with internal design-token names, brand colors, or proprietary class structures never leave your browser. Verify in DevTools → Network.

Common use cases

check_circleBeautify Bootstrap 3 .less source customised for a project theme
check_circleFormat Ant Design overrides for theme tokens (@primary-color, @link-color)
check_circleReformat LESS exported from a design tool or CSS-in-JS bundle
check_circleNormalise nesting depth across a team codebase before commit
check_circleClean up minified LESS from a production build for debugging
check_circleBeautify a LESS mixin library for documentation
check_circleFormat LESS pasted from Stack Overflow to match project style
check_circleReformat LESS after a merge conflict resolution

Online formatter vs Prettier vs stylelint

An online formatter is the fastest option for one-off snippets — paste, click, copy. Prettier is the right tool for project-wide enforcement: configure .prettierrc and a pre-commit hook, and every .less file is formatted on save. stylelint with the stylelint-config-standard-less ruleset goes further — it lints for invalid syntax, unused variables, duplicate selectors, and naming conventions in addition to formatting. Use this online tool for quick paste-and-format; use Prettier + stylelint together for full CI enforcement.

More than formatting

Convert LESS to CSS, SCSS, or back — all browser-side.

LESS to CSS LESS to SCSS CSS to LESS

Frequently Asked Questions

How are nested LESS rules indented?

Each level of nesting adds one indent (2 spaces by default). The opening brace stays on the same line as the selector, the body indents one level, and the closing brace returns to the parent indent. This matches the convention applied by Prettier and stylelint with the standard config — nesting in LESS, SCSS, and modern CSS Nesting all use the same rule.

How should @variables be formatted?

LESS @variables are declared at the top of the file or block, one per line, with a space after the colon: @primary: #3b82f6;. Prettier preserves your declaration order. Group related variables (colors, spacing, typography) and separate groups with a blank line. Avoid mixing variable declarations with rules — keep them in a separate variables.less file or @import.

Does formatting LESS change the compiled CSS?

No. Formatting only changes whitespace in the LESS source. The lessc compiler and dart-less produce byte-identical CSS output from formatted and unformatted LESS — variables, nesting, and mixins are resolved identically regardless of source whitespace.

How are .mixin() definitions and calls formatted?

Mixin definitions follow the same brace-and-indent rule as selectors: .button-style(@color) { ... }. Mixin calls .button-style(red); fit on one line if short, or wrap arguments across lines if they exceed the column limit. Parametric mixins, default values, and rest parameters (...) are preserved exactly.

Does it preserve LESS comments?

Yes. /* CSS comments */ are preserved (LESS keeps them in the compiled output). // line comments are also preserved (LESS strips them at compile time). The formatter never deletes comments — it only re-indents them to match the surrounding block.

Can it format LESS guards (mixin guards)?

Yes. Mixin guards (when (@a > 10), when not (@b)) are preserved on the same line as the mixin signature. Multi-condition guards use commas (logical OR) and and (logical AND). The formatter does not change the guard logic — only whitespace around it.

Is the LESS I paste sent to your servers?

No. Formatting runs entirely in your browser using JavaScript. Stylesheets containing internal design-token names, brand colors, or proprietary class structures never leave your device. Open DevTools → Network and click Format to verify.

Should I use LESS or SCSS in 2026?

SCSS has the larger ecosystem (most design systems and frameworks use it). LESS remains in use because Bootstrap 3 used it and Ant Design still ships .less files for theming. Both compile to identical CSS; the choice is mostly historical. Modern CSS Nesting (Chrome 120+, Safari 16.5+) makes a third option available — native nesting without a preprocessor.