WebToolsPlanet
CSS Tools

LESS Beautifier

Paste minified or messy LESS code and get it back formatted with consistent indentation and spacing.

Last updated: May 21, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is LESS Beautifier?

LESS is a CSS preprocessor that extends CSS with variables (`@var`), nested rules, mixins, and functions. Minified or auto-generated LESS can be hard to read — this tool reformats it with consistent indentation, one property per line, and proper spacing around braces.

Since LESS is a superset of CSS, the formatter handles standard CSS properties alongside LESS-specific features including nested selectors, `&` parent references, and `@variable` declarations.

How to Use LESS Beautifier

1

Paste LESS code into the input area or click "Load Sample"

2

Choose indent size (2 or 4 spaces)

3

Optionally place opening braces on a new line

4

Copy the formatted output

Common Use Cases

  • Developers formatting auto-generated or minified LESS from build tools.
  • Teams enforcing consistent LESS formatting across a codebase.
  • Front-end engineers cleaning up LESS pasted from Stack Overflow or documentation.
  • Developers reformatting LESS before committing to version control.

Example Input and Output

Minified LESS with nested rules is reformatted with proper indentation.

Minified LESS
.card{@bg:#fff;background:@bg;.title{font-size:1.25rem;color:#333;}}
Formatted LESS
.card {
  @bg: #fff;
  background: @bg;
  .title {
    font-size: 1.25rem;
    color: #333;
  }
}

Privacy

All formatting runs in your browser. No code is sent to any server.

Frequently Asked Questions

Does this compile LESS to CSS?
No — this tool only formats (beautifies) existing LESS code. For compiling LESS to CSS, use the LESS to CSS tool.
Does it handle nested rules?
Yes. Nested selectors inside braces are indented one extra level per nesting depth.

Related Tools

SCSS Beautifier
Format and beautify SCSS stylesheets online. Fixes indentation, normalizes spacing, and handles nested rules, $variables, @mixins, and @include directives.
CSS Beautifier / Formatter
Format, indent, and beautify minified or messy CSS code — with configurable indentation and sorting options.
CSS Minifier
Compress and minify CSS code to reduce file size and speed up page loads.
LESS to CSS Converter
Convert LESS to CSS in your browser with variables, nesting, mixins, color functions, compression, source maps, copy, and download.
CSS Validator
Validate CSS syntax online. Checks for unclosed braces, missing colons, empty rules, and invalid property/value pairs using CSS.supports().
CSS to LESS Converter
Convert plain CSS into cleaner LESS with optional selector nesting, LESS variables, formatting, copy, and download output.