About

LESS is a CSS preprocessor that extends standard CSS with variables (@color), mixins, nesting, and mathematical operations. Writing LESS without compiling it produces zero usable output. A missing semicolon inside a mixin guard or an incorrect variable scope can cascade into a completely broken stylesheet, silently dropping hundreds of rules. This tool runs the canonical less.js compiler directly in your browser. No Node.js runtime, no Ruby, no build pipeline. It parses your LESS source through the full AST pipeline and emits standards-compliant CSS. Note: @import statements referencing external files will not resolve in a browser context. Inline all dependencies before compiling.

Formulas

LESS compilation follows a deterministic pipeline. The source string is tokenized, parsed into an Abstract Syntax Tree, evaluated (resolving variables, mixins, and expressions), then serialized back to CSS text.

Source_LESS → Tokenize → Parse → AST → Evaluate → Serialize → Output_CSS

Variable resolution uses lazy evaluation. A variable @x defined at scope depth d is resolved by walking up the scope chain from the current block to the root. The last definition encountered in document order within the resolved scope wins. Mathematical operations preserve unit types: 10px + 5px = 15px. Incompatible units (e.g., px + em) produce a compilation error. Color functions operate in HSL or RGB space: darken(@c, @amount) subtracts @amount from the lightness channel L in HSL representation.

Reference Data

LESS Feature	Syntax Example	CSS Output	Notes
Variables	@color: #4D926F;	Replaced inline	Scoped to block
Nesting	.parent { .child { } }	.parent .child { }	Max ~3 levels recommended
Mixins	.border-radius(@r) { ... }	Expanded at call site	Parametric supported
Mixin Guards	.mixin() when (@a > 10)	Conditional output	Boolean logic
Operations	@base × 2	Computed value	Unit inference
Functions	darken(@color, 10%)	Hex/RGB value	~75 built-in functions
Namespaces	#bundle() { .btn { } }	#bundle .btn { }	Organizational
Extend	:extend(.class)	Merged selectors	Reduces output size
Import	@import "file.less";	Inlined content	Browser: inline only
String Interpolation	@{name}	Replaced value	In selectors & URLs
Escaping	~"calc(100% - 10px)"	calc(100% - 10px)	Pass-through literal
Maps	#colors() { primary: blue; }	Accessed via #colors[primary]	LESS 3.5+
Each Loop	each(@list, { .@{value} {} })	Iterated rules	LESS 3.7+
Detached Rulesets	@rules: { color: red; };	Expanded at use	Like lambda blocks
Parent Selector	&:hover { }	.parent:hover { }	& = parent reference
Property Merging	transform+: rotate(15deg);	Comma-merged	Use + or +_ suffix
Default Variables	@var: val; (redefinable)	Last definition wins	Lazy evaluation
Scope	Block-level	N/A	Inner overrides outer
Comments	// line & /* block */	/* block */ preserved	// stripped in output
Compression	compress: true	Minified output	Removes whitespace

Frequently Asked Questions

The browser sandbox cannot access your filesystem or remote servers to fetch imported LESS files. The less.js compiler expects a file-system resolver (Node.js) or HTTP loader. In this tool, all @import directives will throw a "FileError" since no file provider is registered. Solution: manually inline the contents of imported files into your source before compiling. Concatenate your partials (_variables.less, _mixins.less) into a single input.

LESS uses lazy evaluation with block scoping. If @color is defined at root level and redefined inside a selector block, the inner definition applies only within that block and its children. At root level, the last definition in document order wins. This is different from CSS Custom Properties which follow the cascade. A common pitfall: defining @color in a mixin and expecting it to leak into the caller's scope. It does - LESS mixins share the caller's scope. Use parentheses .mixin() to prevent this.

LESS performs dimensional analysis on arithmetic operations. Adding 10px + 2em triggers an error because pixel and em are not convertible at compile time (em depends on runtime font-size). However, 10px + 2cm works because both are absolute lengths. LESS converts cm to px using the standard factor: 1cm = 37.795px. Use the strict-units option to enforce strict dimensional checking.

No. Compression only removes whitespace, comments, and redundant semicolons. It does not alter selectors, merge rules, or remove unused declarations. The compressed output is semantically identical to the uncompressed version. However, compression does strip /* */ block comments, which may remove license headers. If you need to preserve a comment, use the /*! important comment */ syntax (bang comment), which less.js preserves even in compressed mode.

This tool loads less.js v4.2.0, which supports all features through LESS 4.x including Maps (3.5+), each() loops (3.7+), and @plugin syntax. If your source uses detached rulesets, property merging with +/+_, or the if() inline function - all are supported. The only limitation is JavaScript evaluation via backtick expressions (e.g., `Math.random()`), which is disabled in browser mode for security.

Mixin guards are compile-time conditionals evaluated by less.js, not by the browser. The guard expression when (@size > 768) is checked during compilation. If false, the mixin's output is excluded entirely from the CSS. In contrast, @media and @supports are runtime browser conditions that remain in the output CSS. Use guards for theme variants, responsive utility generation, or conditional inclusion of vendor prefixes at build time.