๐Ÿ”’ Runs in your browser โ€” nothing is uploadedโœ“ Free, no signup

LESS Formatter

Paste LESS to format it with Prettier โ€” clean indentation for variables, mixins, nested rules and operations.

Loading...

0 characters

Formatted LESS

Loading...

When should you use the LESS Formatter?

  • Tidying LESS in an older Bootstrap or Ant Design project
  • Formatting minified LESS so it's readable
  • Keeping stylesheet formatting consistent across a team

How to use the LESS Formatter

  1. 1

    Paste LESS

    Paste a stylesheet or snippet.

  2. 2

    Set indentation

    Choose 2 or 4 spaces or tabs and a line width.

  3. 3

    Check errors

    Syntax errors show the line and column.

  4. 4

    Copy or download

    Copy the result or download styles.less.

Examples

Variables and nesting

Before

@c:#fff;.a{.b{color:@c}}

After

@c: #fff;
.a {
  .b {
    color: @c;
  }
}

Common errors and how to fix them

CssSyntaxError
Check the line in the error for a missing brace, semicolon or colon.
I need the compiled CSS
This formats LESS source but doesn't compile it. Run the LESS compiler in your build to get CSS.
Related tools:ย SCSS Formatter ยท CSS Minifier ยท Color Picker & Converter

More from Code Formatters & Minifiers

Free tools that run in your browser โ€” no signup, nothing uploaded.

LESS Formatter FAQ

No โ€” it formats LESS source code only.

Prettier, the same formatter used in editors and CI pipelines.

Yes โ€” mixins, guards, operations, variables and nested rules are formatted.

Yes, // and /* */ comments are preserved.

Both add variables, nesting and mixins to CSS. LESS uses @variables; SCSS uses $variables and is more common in new projects.

No. Everything runs in your browser, so your stylesheet never leaves your device.