ToolLineup

LESS Formatter

This LESS formatter parses the file as LESS, so at-variables, nesting, mixin calls, guards and escaped values are recognised properly. That distinction matters because the at sign means something different in LESS than in plain CSS — a CSS formatter reads a variable like at-brand as the start of an at-rule and gets confused immediately. As with SCSS, this formats the source rather than compiling it: producing CSS requires the LESS compiler, which resolves imports, variables and mixin calls as part of a build.

How it works

Formats LESS with its own parser, so @variables, nesting, mixin calls and guards are recognised rather than mangled as plain CSS.

This formats LESS; it does not compile it to CSS, which is a separate step needing the LESS compiler.

Everything runs in your browser — nothing you paste is sent to a server.

LESS input
Paste LESS here…
Formatted LESS

How to format LESS

  1. Paste your LESS into the input on the left.
  2. Choose an indent size and wrap width.
  3. Copy or download the formatted result.

LESS syntax is parsed properly

@variables, nesting, mixin calls, guards and escaped values are recognised as LESS. That matters because @ means something different in LESS than in plain CSS — a CSS formatter reads @brand as the start of an at-rule and gets confused immediately.

Formatting is not compiling

This tidies the source; it does not produce CSS. Compiling needs the LESS compiler, which resolves imports, variables and mixin calls as a build step.

Common use cases

  • Tidying an older LESS codebase before a migration.
  • Making a nested file readable before editing it.
  • Normalising style across files written by different people.

Frequently asked questions

Why does a CSS formatter break on LESS?

Because the at sign introduces variables in LESS but at-rules in CSS. A CSS parser reads a variable declaration as a malformed at-rule and either stops or produces nonsense.

Does this compile LESS to CSS?

No. It formats the source. Compiling needs the LESS compiler to resolve imports, variables and mixin calls, which is a build step.

Are mixin guards handled?

Yes. Guards, escaped values and mixin calls with arguments are all parsed as LESS and re-indented in place.

Can I use it on a file that mixes LESS and plain CSS?

Yes. Plain CSS is valid LESS, so a file containing both formats correctly.

Is my code uploaded anywhere?

No. Everything runs entirely in your browser, so nothing you paste is transmitted or stored on a server.

Related tools