Skip to main content

​
LESS Beautify/Minify

Format or minify LESS stylesheets. Beautify adds indentation for nested rules; minify removes comments and whitespace.

​
Overview

The LESS Beautify/Minify tool processes LESS as CSS:
  • Beautify — Indents rules, properties, and nested selectors with 2 spaces
  • Minify — Removes comments, collapses whitespace, and strips unnecessary characters
Supports LESS syntax including nested rules, variables, and mixins.

​
Use Cases

LESS cleanup

Format LESS files for readability and team consistency

Build optimization

Minify LESS before compilation to reduce intermediate file size

Migration

Reformat legacy LESS files with consistent indentation

Debugging

Beautify minified LESS from third-party libraries

​
Actions

Indents rules, properties, and nested selectors with 2 spaces per level.Input:
.header{background:@color;.nav{display:flex;}}
Output:
.header {
  background: @color;
  .nav {
    display: flex;
  }
}

​
Implementation Details

The LESS beautifier uses the same CSS beautification algorithm as the CSS Beautify tool. LESS-specific syntax (variables @var, mixins .mixin(), nesting) is treated as CSS syntax. Source: lib/tools/engine.ts:525-528
Key logic
case 'less-beautify':
case 'scss-beautify': {
  return { output: action === 'minify' ? minifyCss(input) : beautifyCss(input) };
}
The beautifier does not parse LESS semantics (variable scope, mixin expansion). It formats based on CSS structure only.

​
LESS Feature Support

@primary: #007bff;
color: @primary;
Variables are preserved and formatted as CSS properties.
.header {
  .nav {
    display: flex;
  }
}
Nested rules are indented with 2 spaces per level.
.rounded(@radius: 5px) {
  border-radius: @radius;
}
Mixins are formatted as rulesets. Mixin calls (.rounded(10px);) are treated as properties.
For LESS-aware formatting with semantic validation, use the official lessc compiler with --clean-css or a dedicated LESS formatter.

​
Keyboard Shortcuts

  • Cmd/Ctrl+Enter — Beautify (default)
  • Cmd/Ctrl+Shift+C — Copy output
  • Cmd/Ctrl+Shift+S — Download output

SCSS Beautify/Minify

Format or minify SCSS (Sass) stylesheets

CSS Beautify/Minify

Format or minify vanilla CSS (same algorithm)

HTML Beautify/Minify

Format or minify HTML markup

Build docs developers (and LLMs) love

Get started for freeTalk to us