Less Beautifier & Formatter

This Less beautifier and formatter converts compact or inconsistent Less into clean, consistent styles that are easy to read and maintain. The tool runs entirely in your browser so no install or server upload is required. Paste Less, upload a file, or type directly in the editor, choose formatting options, then format, validate, copy, or download the result.

Key features

  • Instant Less formatting in the browser using a fast less beautifier
  • Configurable indent size and indent character to match project style
  • Control whitespace and spacing around blocks and nested rules
  • Support for formatting variables, mixins, and operations cleanly
  • Handle nested selectors and guards with readable output
  • Free to use with no signup required and private because everything runs in the browser

How to use this Less beautifier and formatter

  1. Paste raw or minified Less into the left editor or upload a .less file
  2. Choose indent size and whether to use spaces or tabs
  3. Click Beautify Less to run the formatter online and view results instantly
  4. Resolve any warnings, then copy or download the formatted Less for use

Example 1: Minified Less vs Beautified Less

Minified Less

Copy
.rounded(@r){.when(@r < 0){warn("Negative radius @{r} not allowed");@r:0}}.btn{@brand:#3498db;background:@brand;color:#fff;.rounded(5px);padding:10px 20px;border:0;cursor:pointer;&:hover{background:darken(@brand,10%)}}

Beautified Less

Copy
.rounded(@r) {
    .when (@r < 0) {
        warn("Negative radius @{r} not allowed");
        @r: 0;
    }

    border-radius: @r;
}

@brand: #3498db;

.btn {
    background: @brand;
    color: #fff;
    .rounded(5px);
    padding: 10px 20px;
    border: 0;
    cursor: pointer;

    &:hover {
        background: darken(@brand, 10%);
    }
}

Example 2: Variables, operations and nested rules

Minified Less

Copy
@pad:5px;@color:#2ecc71;body{margin:0;padding:@pad*2;background:@color}h1{color:darken(@color,15%);font-size:@pad*2}a{color:#fff;text-decoration:none;&:hover{color:fade(#fff,80%)}}

Beautified Less

Copy
@pad: 5px;
@color: #2ecc71;

body {
    margin: 0;
    padding: @pad * 2;
    background: @color;
}

h1 {
    color: darken(@color, 15%);
    font-size: @pad * 2;
}

a {
    color: #fff;
    text-decoration: none;

    &:hover {
        color: fade(#fff, 80%);
    }
}

Customization options

Below are the settings you can adjust to get the exact Less output you want after formatting.

Option Default Description
Indent Size 4 Number of spaces or tabs per indentation level in the formatted Less
Indent Char Space Character used for indenting. Choose tabs or spaces to match project style
Use Tabs False When true, use tab characters for indentation
EOL New Line End of line character for the formatted output
Ending With Newline False Add a trailing newline at the end of the formatted file for POSIX friendliness
Brace Style Collapse Where to place opening braces for blocks
Selector Newline True Place each selector on its own line when multiple selectors are used
Rule Spacing True Number of blank lines between rule sets to improve readability
Indent Empty True When true, empty rules keep an indentation line to preserve structure in diffs

Why use this Less beautifier and formatter

A consistent Less formatter reduces cognitive load when reviewing styles and keeps diffs small in version control. Use this Less beautifier to enforce indentation rules, tidy nested selectors, and format mixins variables and operations efficiently. The tool is useful for quick fixes during development and for preparing source files before commits.

Best practices and workflow

  • Agree on indentation and nesting rules for your project to prevent unnecessary diff noise
  • Run the Less formatter in pre commit hooks so source files are consistent on commit
  • Combine formatting with a linter to detect potential style or performance issues
  • Keep mixins variables and utility rules well organized to simplify formatting and reuse
  • Store formatted Less in version control and generate minified CSS in CI to reduce diffs

Conclusion

Use this Less beautifier and formatter to make your stylesheets clearer and easier to maintain. It runs in the browser with no setup, supports common Less constructs, and offers flexible options so you can beautify and format code to match team or personal preferences.