LESS Formatter

LESS Formatter & Beautifier

What it does

This tool formats and beautifies LESS (Leaner Style Sheets) code using Prettier. Paste minified, compressed, or poorly-indented LESS and get back consistently formatted code with proper indentation, spacing, and line breaks.

Use cases

Use this formatter when reviewing minified LESS from third-party libraries, cleaning up auto-generated styles, enforcing consistent indentation in a project, or preparing LESS code for code review. It handles variables, nesting, mixins, operations, and all standard LESS syntax.

Example

Minified LESS input:

@c:#667eea;.container{max-width:800px;margin:0 auto;&:hover{background:rgba(255,255,255,.15)}}

Formatted LESS output:

@c: #667eea;
.container {
  max-width: 800px;
  margin: 0 auto;
  &:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}

Pitfalls

Prettier formats LESS according to its own opinionated style, which may differ slightly from other formatters. It will not compile or validate LESS logic — invalid variable references or mixin calls will still format but will fail when compiled by the LESS compiler.

VS Code integration

To automatically format LESS on save in VS Code, install the Prettier extension and add "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } to your settings.json. You can also configure indentation and other options in a .prettierrc file at the root of your project.