LESS beautifier - format LESS in your browser
LESS is an older CSS preprocessor (cousin of SCSS) - variables (`@var`), nesting, mixins (`.mixin()`), guards. The beautifier uses Prettier with the less parser.
LESS is less popular today than SCSS, but still lives in many projects (Bootstrap 3 was LESS, Ant Design used LESS through v4, Semantic UI is all LESS). The format is identical to CSS, plus extra constructs.
Accepts `.less`. `@var` (LESS variable) ≠ `@media` (CSS at-rule) - Prettier disambiguates by context.
How to use it
- Pick a mode (Gentle / Aggressive / Cosmetic-only) or keep the default.
- Paste your code into the left panel, or use "Upload file".
- Tune settings (gear icon): indent, width, quotes, semicolons.
- Click Format - first click takes a moment (libraries lazy-load).
- On the right you get the output with syntax highlighting - copy, download, or open in new tab.
When this is useful
Five LESS situations:
- Bootstrap 3 fork. Old project on BS3 has its own LESS files → beautify all.
- Ant Design < v5. Theme customisation in LESS - variables override.
- LESS → SCSS migration. Before migrating: unify the LESS formatting.
- Variable refactor. After `@primary` → `@brand-primary` Find & Replace, indentation drifted.
- Tools / utility files. Mixin helpers in old projects.
Questions and answers
Yes - Prettier supports LESS guards. Indentation preserved, space before `when`.