tool

Less Formatter, Validator & Minifier

Clean up Less stylesheets, catch syntax errors and safely minify mixins, variables and guards.

input
0 characters
1
result

paste your code and choose format or minify

Format, validate and minify Less CSS

Less is still behind many production themes, from Bootstrap 3 sites and older Ant Design projects to Magento 2 storefronts. Paste a Less file with @variables, parametric mixins, guards, @{interpolation} and escaped ~"…" values, then format it into clean, indented code, check it for syntax errors, or minify it with comments and extra whitespace removed. Every minified result is verified against the original first, and nothing is uploaded: it all happens in your browser.

What can you do?

  1. 1. Format Less
    Indent nested rules and mixin calls, put each declaration on its own line and space values consistently, while keeping your comments.
  2. 2. Validate syntax
    Find unclosed blocks and stray braces with the line and column number before the Less compiler stops your build.
  3. 3. Minify safely
    Strip // and /* */ comments and unneeded whitespace. Escaped strings like ~"calc(100% - @{w})", selector interpolation such as .@{name} .b and /*! licence comments stay exactly as written.
  4. 4. Verified output
    The minified code is re-formatted and compared with the original. If the two aren't equivalent, you get a message instead of broken CSS.

Why tidy up Less files?

Long-lived Less themes tend to collect inconsistent indentation, mixins written on one line and overrides pasted in by different people over the years. Formatting makes the cascade of nested rules readable again, which is the first step to safely changing or migrating a theme.

Less is also forgiving at authoring time but strict at compile time. A missing brace deep in a variables file can stop the whole theme from building, and a validator points straight to it.

How to format Less online

  1. 1. Paste the Less code
    Paste a full .less file or just the rules you're working on.
  2. 2. Pick an action
    Format for readable code, minify for compact code, or validate to only check the syntax.
  3. 3. Resolve errors
    If something doesn't parse, go to the reported line and column and fix it.
  4. 4. Copy the result
    Copy the output back into your theme or build.

Example: Less before and after

LESSInput
@primary:#06b6d4;
.rounded(@r:12px){border-radius:@r}
.card{.rounded(16px);
// hover state
&:hover{color:darken(@primary,10%)}.@{prefix}-title{font-weight:600}}
LESSFormatted
@primary: #06b6d4;
.rounded(@r:12px) {
  border-radius: @r;
}
.card {
  .rounded(16px);
  // hover state
  &:hover {
    color: darken(@primary, 10%);
  }
  .@{prefix}-title {
    font-weight: 600;
  }
}
LESSMinified
@primary:#06b6d4;.rounded(@r:12px){border-radius:@r}.card{.rounded(16px);&:hover{color:darken(@primary,10%)}.@{prefix}-title{font-weight:600}}

Less features this tool understands

Less language features supported by the formatter and minifier
FeatureExample
Variables@brand: #428bca;
Parametric mixins.button-variant(@color; @bg) { … }
Mixin guards.m() when (@mode = dark) { … }
Interpolation.@{name}-title, ~".col-@{i}"
Escapingwidth: ~"calc(100% - 10px)";
Extend&:extend(.btn all);
Detached rulesets@r: { color: red; }; .x { @r(); }
Import options@import (reference) "variables.less";
Nested media queries.a { @media (min-width: 768px) { … } }

Frequently asked questions

Does this compile Less to CSS?

No. It works on Less source code, so variables, mixins and functions stay as they are. Compile with lessc or your build tool to get CSS, then use the CSS formatter if you want to minify or validate the compiled output.

Does validation detect undefined variables or mixins?

No. It checks syntax only. Variables and mixins are resolved by the Less compiler, which also needs your imported files.

Why are spaces kept inside some mixin calls?

The formatter follows Prettier, which leaves the spacing of mixin parameters like .rounded(@r:12px) as you wrote it. The minifier removes those spaces safely, because Less treats .m(1; 3) and .m(1;3) the same way.

What happens to JavaScript evaluation in backticks?

Backtick expressions are treated as strings and left untouched when minifying. Note that inline JavaScript is disabled by default in modern Less versions.

Should I migrate from Less to SCSS?

Many teams have, because Sass has a larger ecosystem today, but Less remains stable and well supported. If you do migrate, the SCSS formatter on Buggerspot helps you clean up the converted files.

Is my code private?

Yes. Everything is processed in your browser and nothing is uploaded.

Related tools

Need to minify the compiled output? Run it through the CSS minifier and validator. Moving a theme to Sass? Tidy the result with the SCSS formatter.