What is LESS Formatter?

Format LESS source locally with the correct parser and preserve variables, mixins, guards, maps, and detached rulesets without running a compiler.

What can LESS Formatter do?

LESS Formatter supports Format. Each mode is available directly in the page workspace.

Does LESS Formatter upload my data?

LESS Formatter processes your input locally in the browser. DevSexy does not add an upload, account, or server-processing step to this workflow.

LESS Formatter Online — Guards, Mixins & Parser Diagnostics

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@ variables
Theme tokens and values
2Parametric mixin
Callable rules with arguments
3Guard · when
Conditional mixin definition
4Map lookup
Bracket access to a ruleset map
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.

Compressed

Hard to scan and review

Formatted

Spacing and nesting normalized

Parsed

Grammar accepted without recovery

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

LESS Formatter

Read LESS by the constructs that make it LESS.

Formatting exposes branches; it does not execute them.

A ruleset can be data before it becomes output.

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

Choose the parser from the language signature

What is LESS Formatter?

What can it do?

How to use LESS Formatter

Choose a task

Provide the input

Review the result

Frequently asked questions