LESS to CSS Compiler

Compile LESS to CSS in the browser. Supports @variables, nesting, & selector, and arithmetic.

LESS Input

Supports: Variables (@var), Nesting, & selector, // comments, Basic arithmetic (+ - * /)

CSS Output

Compiled CSS will appear here…

Click "Compile LESS → CSS" to start.

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the LESS to CSS Converter?

Compile LESS syntax to plain CSS in the browser. Supports variables, mixins, and nesting. No build tool required.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the LESS to CSS Converter

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Paste LESS code

Paste your LESS stylesheet including variables (@var), nesting, and mixins.

Convert

Click Convert to compile LESS to plain CSS. Errors are shown inline if the LESS syntax is invalid.

Copy the CSS

Copy the compiled CSS for use in projects without a LESS build pipeline.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

converted.css

/* LESS Input */
/*
@primary: #0071e3;
@radius: 12px;

.card {
  border-radius: @radius;
  padding: 24px;

  &:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }

  .card-title {
    color: @primary;
  }
}
*/

/* CSS Output */
.card {
  border-radius: 12px;
  padding: 24px;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card .card-title {
  color: #0071e3;
}

Pro tips

Pro tips for better results

★

LESS variables use @ but SCSS uses $

LESS: @primary: blue. SCSS: $primary: blue. The compiled CSS output is identical. If you are migrating from LESS to SCSS, a find/replace of @ to $ in variable declarations is the first step.

FAQ

Frequently asked questions

Both extend CSS with variables, nesting, and mixins. LESS uses @variable syntax and runs on JavaScript (originally browser-based). SCSS is a superset of CSS using $variable syntax and compiles with the Dart Sass compiler. SCSS is more commonly used in modern projects.

No. LESS.js runs entirely in the browser. Nothing is sent to a server.