DevToolsmith

Less Formatter

Paste a Less stylesheet and get it formatted with Prettier: variables, mixins with arguments and guards, nested rules, operations and escaped values cleanly indented. CSS and SCSS work too, and nothing is uploaded.

Runs 100% in your browser — nothing is uploaded

Input
Tip: drop a file here113 chars · 113 bytes · 1 line
Formatted
148 chars · 148 bytes · 12 lines

Example

Before
@import (reference) "mixins.less";@primary:#1890ff;@radius:4px;.button-variant(@color;@bg:@primary) when (lightness(@bg)>50%){color:@color;background:@bg;&:hover{background:darken(@bg,8%)}}
.btn{.button-variant(#fff);border-radius:@radius*2;padding:~"calc(0.5rem + 1px)" 1rem;&-lg{padding:(@radius*3) 1.5rem}}
After
@import (reference) "mixins.less";
@primary: #1890ff;
@radius: 4px;
.button-variant(@color;@bg:@primary) when (lightness(@bg)>50%) {
  color: @color;
  background: @bg;
  &:hover {
    background: darken(@bg, 8%);
  }
}
.btn {
  .button-variant(#fff);
  border-radius: @radius*2;
  padding: ~"calc(0.5rem + 1px)" 1rem;
  &-lg {
    padding: (@radius*3) 1.5rem;
  }
}

Less features the formatter handles

  • Variables (@primary), variable interpolation in selectors and properties (@{prefix}-btn).
  • Mixins with parameters, defaults, !important, pattern matching and when guards.
  • Nested rules with &, including suffixes like &-lg, and :extend().
  • Operations, color functions like darken() and fade(), and escaped strings ~"…".
  • @import options such as (reference) and (css).

Format Less in your project

Shell
npm install --save-dev prettier
npx prettier --write "src/**/*.less"

Using SCSS or plain CSS elsewhere? See the SCSS formatter and the CSS formatter.

Frequently asked questions

Does it compile Less to CSS?

No. It only reformats the Less source, so variables, mixins and guards stay as they are. To get CSS, run the Less compiler (npx lessc styles.less styles.css), then tidy the result with the CSS formatter or shrink it with the CSS minifier.

Are mixin guards and escaping supported?

Yes. Guards (when (iscolor(@c))), mixins with semicolon-separated arguments and default values, !important after a mixin call, escaped strings like ~"calc(100% - 10px)", and JavaScript-free operations in parentheses all format correctly.

Why is Less still used?

Mostly in existing projects: Ant Design up to v4, Bootstrap 3 and many internal design systems are written in Less. New projects tend to pick plain CSS with custom properties and nesting, or SCSS. Formatting with Prettier makes an old Less codebase easier to read and to migrate.

Can I mix Less and CSS?

Yes. Every valid CSS file is valid Less, so you can paste plain CSS here and it is formatted the same way as in the CSS formatter.