Paste LESS on the left and get plain CSS on the right, compiled by the official less.js
engine entirely in your browser. Variables, mixins, nesting, operations, guards and the
built-in color functions all work; parse errors show the line and column with the
offending source line, and the last good output stays visible while you fix them. External
@import files cannot be fetched here, so the tool flags them and asks you to
paste their contents. Working in Sass instead? Use the
SCSS → CSS Compiler. Tidy the result with the
CSS Formatter, or translate utility classes with
Tailwind → CSS.
LESS → CSS Compiler
Compile LESS to CSS instantly in your browser
10px / 2 stays as written; (10px / 2) becomes 5px. Less 4 default.
542 chars
What the compiler supports
This is the same less.js that ships in the npm package, so anything that compiles with
lessc from a single file compiles here: @variables and variable
interpolation, parametric mixins with defaults and guards, & nesting and
parent selectors, extend, detached rulesets, maps, and the full function
library (darken, lighten, contrast,
fade, percentage, unit, and so on).
What it does not do
It does not resolve @import of other .less files, does not load
@plugin scripts, does not evaluate inline JavaScript, and does not emit source
maps. Minify uses Less's simple built-in compressor rather than a full CSS optimizer.
Frequently asked questions
Which version of Less does this use, and does my code leave the browser?
It runs the official less.js compiler (version 4.9.1) inside your browser. The compiler (about 46 KB gzipped) is downloaded once, the first time you compile, and then everything — parsing, variable resolution, mixins, nesting, color functions — happens locally. Your LESS is never uploaded anywhere.
Why does @import "file.less" fail?
In the browser there is no file system and this tool does not fetch URLs, so a .less import cannot be resolved. The tool lists every @import it finds with its line number; paste the imported file's contents in place of the @import line and it will compile. Plain CSS imports (@import "x.css" or @import (css) "x") are passed through to the output untouched, exactly as Less does, and @import (optional) files are silently skipped.
What does the Math option change?
Less 4 defaults to "parens-division": bare division like 10px / 2 is left as written (because it is valid CSS shorthand in font and grid), while (10px / 2) evaluates to 5px. "Always" restores the Less 3 behaviour of evaluating every operation eagerly. "Strict" only evaluates math inside parentheses, for all operators.
How is "Minify output" implemented?
It enables Less's built-in compress option, which strips whitespace and newlines. Less marks that option as deprecated because it is a basic minifier, not a full CSS optimizer — it does not merge rules or shorten values. For production builds run the output through a dedicated CSS minifier.
Can I use inline JavaScript (backtick expressions) or @plugin?
No. Inline JavaScript is disabled (Less's javascriptEnabled option is false, which is also the Less default) and @plugin files are not loaded. Both would require evaluating arbitrary code with new Function, which this site's Content Security Policy forbids. A backtick expression produces the error "Inline JavaScript is not enabled".
Get weekly dev tools and tips