LESS to CSS Converter Online – Convert LESS to Plain CSS

How to use the LESS to CSS Converter

Paste your LESS code into the Input editor, or use Sample, Upload file or Load URL.

Press Convert to evaluate the LESS and print expanded CSS.

Fix any reported error, such as an undefined variable, and convert again.

Use Copy or Download above the output panel to take the CSS with you.

What the LESS to CSS converter does

Browsers do not understand LESS, so every LESS stylesheet must be turned into CSS before it ships. This LESS to CSS converter runs the official less.js compiler (version 4) in your browser and prints readable, expanded CSS. Use it to see what a component's styles really produce, to extract the CSS from an old theme, or to hand plain CSS to someone who does not use LESS.

Example

@sizes: { small: 12px; large: 20px; }
.text(@mode) when (@mode = muted) { color: #6b7280; }
.caption {
  font-size: @sizes[small];
  .text(muted);
  &::before { content: "— "; }
}
.heading { font-size: @sizes[large]; width: ~"calc(100% - 20px)"; }

.caption {
  font-size: 12px;
  color: #6b7280;
}
.caption::before {
  content: "— ";
}
.heading {
  font-size: 20px;
  width: calc(100% - 20px);
}

The detached-ruleset map @sizes was looked up with @sizes[small], the guarded mixin matched because @mode = muted, and the escaped string ~"calc(...)" was output without quotes, a classic LESS trick to stop the compiler from evaluating calc().

What gets evaluated

Variables, including lazy evaluation: a variable can be used before it is defined, and the last definition in scope wins.
Mixins with parameters, guards (when), pattern matching and !important.
Operations: +, - and * always; division only inside parentheses in LESS 4.
Functions such as darken(), fade(), percentage() and e().
Nesting, & references and media query bubbling.

Things that cannot be converted here

Local @import statements fail because the converter has no access to your files: paste the imported variables or mixins at the top of your code instead. Inline JavaScript evaluation with backticks is disabled, as in current LESS defaults. This page always outputs expanded CSS; for a minified result use the LESS Compiler with Minify output, or pass the CSS through the CSS Minifier.

Checking the result

Source order is preserved

less.js writes rules in the order they appear in your source, with nested rules placed right after their parent. That order matters in CSS: when two selectors have the same specificity, the later one wins. If you reorganize the LESS before converting, compare the CSS order too, not just the declarations.

Compare the generated selectors with your intentions. Deep LESS nesting turns into long selectors with high specificity, and mixins called in many places repeat their declarations in every rule. If the CSS is much larger than expected, look for mixins that could be replaced with :extend or a shared class. To get a nested, Sass-flavored version of the same styles, try LESS to SCSS. Conversion happens in your browser.

Frequently asked questions

Is LESS to CSS the same as compiling LESS?

Yes. Converting LESS to CSS means compiling it. This page uses the same less.js compiler as the LESS Compiler, with expanded output.

Why does my division stay as a slash?

LESS 4 evaluates division only inside parentheses by default. Write (@a / 2) instead of @a / 2.

Why does my @import fail?

The converter runs in your browser and cannot read local files. Paste the contents of the imported file above your code.

What does ~"..." do in LESS?

It escapes a string: the content is output as-is without quotes, which is useful for values LESS should not evaluate, such as some calc() expressions or IE filters.

LESS to CSS Converter