peartools

LESS Formatter and Beautifier

Paste messy LESS and get it back with one declaration per line and nested rules indented clearly. Your variables, nesting, and mixins are kept exactly as written. Everything runs in your browser, so your code stays on your device.

Indent
Result

What a LESS formatter does

LESS adds variables, nesting, and mixins on top of CSS, and that extra structure is easy to make messy. A formatter, also called a beautifier, rewrites the source with one declaration per line and each nested rule indented under its parent, so the structure is clear. This tool formats the LESS source only. It does not compile it to CSS, so everything you wrote is kept.

Why use our LESS beautifier

  • ·Free. No signup, no paywall, no limits.
  • ·Runs in your browser. Your code is never uploaded, so it is safe for private projects.
  • ·Keeps your LESS. Variables, nesting, and mixins are preserved, not compiled away.
  • ·Your house style. Choose 2 or 4 space indentation to match your project.
  • ·Syntax highlighting. The editor colours selectors and variables, and lets you collapse and expand nested rules.

LESS formatter options

Format

Rewrites your LESS with one declaration per line and consistent indentation, keeping nested rules, variables, and mixins clear. Turns messy LESS into clean, readable code.

Before.a{@c:red;color:@c;.b{margin:0}}After.a { @c: red; color: @c; .b { margin: 0; } }

Nesting

Nested selectors are reindented one level per parent, so the structure of your LESS reads clearly no matter how deep the nesting goes.

Before.a{.b{.c{top:0}}}AfterEach level indented under its parent

Indent

Choose 2 or 4 spaces for each level of nesting, so the formatted LESS matches the style used in the rest of your project.

Before2 spaces or 4 spacesAfterYour choice per level

When to format LESS

A formatter helps whenever your LESS source is hard to read. These are the cases that come up most:

  • ·Cleaning up a file. Fix the indentation of a LESS file before you commit it.
  • ·Cleaning up pasted code. Reformat LESS copied from a theme, a framework like Bootstrap, or a tutorial so it matches your style.
  • ·Reviewing a pull request. Make deeply nested rules readable before you review or merge them.
  • ·Learning LESS. See how nesting and variables are laid out while you are learning.

Official LESS resources

To go further than formatting, these are the official references for the Less language:

Run the same LESS formatter in your project

This tool formats LESS with Prettier, which most front end projects already use. To apply the same formatting to your stylesheets:

ToUse
Format every LESS filenpx prettier --write "**/*.less"
Check without changing filesnpx prettier --check "**/*.less"
Keep settings in the repoAdd a .prettierrc file with your "tabWidth"

Prettier keeps LESS features like variables, nesting, and mixins as written, so the formatted file still compiles the same way.

Related formatters

Working across stylesheets and markup? These formatters run the same way, right in your browser:

Frequently asked questions

What is a LESS formatter?
A LESS formatter takes LESS code that has messy spacing and rewrites it with one declaration per line and consistent indentation, keeping nested rules, variables, and mixins clear. It does not compile the LESS to CSS, it only cleans up how the source is laid out.
How do I format LESS?
Paste your LESS into the input box, pick your indentation, then click Format. The clean version appears below. Click the copy button to copy it, or download it as a .less file.
Does this compile LESS to CSS?
No. This tool formats the LESS source so it is easy to read. It does not run the LESS compiler, so variables, nesting, and mixins are kept as written. Use it to clean up your LESS, then compile it with your normal build.
Does formatting change how my LESS compiles?
No. Formatting only adds or removes whitespace and reindents the code. The selectors, variables, nesting, and mixins stay the same, so it compiles to exactly the same CSS as before.
Is this a LESS beautifier?
Yes. Format and beautify mean the same thing here: taking messy LESS and laying it out cleanly with proper indentation. Some people call it a LESS beautifier, prettifier, or pretty printer.
Is my LESS kept private?
Yes. All formatting runs in your browser. Your LESS is never uploaded to a server or saved anywhere, so you can safely paste in code from a private project. Once the page has loaded you can even use it offline.