Skip to tool
Web engineering

LESS Formatter

Format LESS variables, mixins, nesting, and rules without compiling.

Online tools Pricing
Input0 characters
Result0 characters
Ready

Prefer a native workflow?

Keep LESS Formatter one shortcut away.

DevSexy for Mac puts the same private workflow in a focused desktop app, with global shortcuts and no browser tab to manage.

Global shortcutOffline-readyLocal processing
Try the Mac app free

This browser tool remains free.

A language signature, not styled CSS

Read LESS by the constructs that make it LESS.

Variables are only the first clue. Parametric mixins, guarded branches, detached rulesets, and lookup syntax give LESS its own grammar and its own formatting failure modes.

@brand: #d97706;
@space: { sm: 8px; md: 16px; };

.btn(@pad; @bg) when (@pad > 0) {
  padding: @pad;
  background: @bg;
}

.icon(@name) {
  width: @space[@name];
}

@card-base: { border-radius: 8px; };
  1. 1@ variables

    Theme tokens and values

  2. 2Parametric mixin

    Callable rules with arguments

  3. 3Guard · when

    Conditional mixin definition

  4. 4Map lookup

    Bracket access to a ruleset map

  5. 5Detached ruleset

    Rules stored as a value

Guarded mixin · conceptual decision tree

Formatting exposes branches; it does not execute them.

.badge(@tone) when (@tone = primary) { color: white; }
.badge(@tone) when (@tone = neutral) { color: #111; }

Call

.badge(primary)

Test 1

@tone = primary?

Match

first guarded definition

Fallback

continue testing or no match

The formatter parses and lays out both definitions. Only the LESS compiler evaluates a guard for a concrete call.

Detached ruleset · scope and use

A ruleset can be data before it becomes output.

@card-base: {
  padding: 16px;
  border-radius: 8px;
};
Store@card-base is not emitted by itself
Call@card-base(); includes declarations
Lookup@config[primary] reads a mapped value
ScopeDefinition and caller context can matter

Review-readiness ladder

The useful finish line is stable source, not a false compile verdict.

1

Compressed

Hard to scan and review

2

Formatted

Spacing and nesting normalized

3

Parsed

Grammar accepted without recovery

4

Stable source

Ready for review or compilation elsewhere

Choose the parser from the language signature

LESSparser: less

@variables · when guards · detached rulesets

CSSparser: css

Browser-native declarations and at-rules

SCSSparser: scss

$variables · interpolation · @use modules

Run a reproducible example

Format Less variables and parametric mixins without evaluating them.

Using an example replaces the current input, reference input, operation, and options. Public demonstration data only.

Format a Less variable and hover rule

Use two-space indentation and retain the @brand reference.

Input

@brand:#7c3aed;.button{color:@brand;&:hover{opacity:.8}}

The output remains Less and keeps the nested parent selector.

@brand: #7c3aed;
&:hover {
opacity: 0.8;

Format a parametric mixin

The .rounded mixin receives an 8px argument inside the card rule.

Input

.rounded(@r){border-radius:@r}.card{.rounded(8px)}

The call remains a mixin call, not an expanded CSS declaration.

.rounded(@r)
.rounded(8px);

Continue with a related task

CSS Beautifier & Minifier

Format, diagnose, and minify CSS with syntax-aware processing.

SCSS Formatter

Format nested Sass syntax into a stable, reviewable structure.

Text Diff

Compare two texts by line, word, or character in a local worker.

Repeat the task in DevSexy for Mac

Use the native app for repeated offline work and direct Option shortcuts.

Direct answer

What is LESS Formatter?

Format LESS online with the correct parser while preserving variables, mixins, guards, maps, and detached rulesets without running a compiler.

What can it do?

  • Format

How to use LESS Formatter

  1. 01

    Prepare the input

    Paste Less source, including variables or mixin definitions.

  2. 02

    Choose the operation

    Set indentation and wrap width, then Format.

  3. 03

    Review the evidence

    Use your Less compiler to resolve imports and verify emitted CSS.

Frequently asked questions

Does this convert Less to CSS?
No. It formats Less source with a parser and printer. Variables and mixin calls remain unevaluated; a Less compiler must produce CSS.
Are imports resolved during formatting?
No project files or remote imports are loaded. A syntactically printable import is not proof that your build can resolve it.
Can formatting confirm browser compatibility?
No. Review compiled CSS, browser support, and rendered states in the application. Formatting only checks that this parser can read and print the source.