What does LESS give up when compiled to CSS?

Variables, mixins, nesting, arithmetic, and guards all get resolved. The output is a pure CSS file you can ship directly.

Are LESS escaping functions preserved?

e() and tilde-quoted strings evaluate to their unescaped value; the output is raw CSS with no trace of the escape.

Each level becomes a compound selector. `.a { .b { color: red; } }` becomes `.a .b { color: red; }`. Parent references (&) resolve correctly.

Dev-ready. For production, run through a minifier (CSS Minify) to strip whitespace.

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

@primary: #3b82f6;
@radius: 0.5rem;

.btn {
  padding: 0.5rem 1rem;
  border-radius: @radius;
  background: @primary;
  color: white;
}

Output

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #3b82f6;
  color: white;
}

Convert LESS to standard CSS. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

LESS can run directly in the browser via less.js, compiling stylesheets client-side without a build step.
Twitter Bootstrap was originally built with LESS in 2011, making LESS the preprocessor of choice for millions of projects.
LESS's JavaScript implementation can compile a 10,000-line stylesheet in under 100 milliseconds on modern hardware.

What does LESS give up when compiled to CSS?: Variables, mixins, nesting, arithmetic, and guards all get resolved. The output is a pure CSS file you can ship directly.
Are LESS escaping functions preserved?: e() and tilde-quoted strings evaluate to their unescaped value; the output is raw CSS with no trace of the escape.
How does nesting expand?: Each level becomes a compound selector. `.a { .b { color: red; } }` becomes `.a .b { color: red; }`. Parent references (&) resolve correctly.
Is the output dev-ready or production-ready?: Dev-ready. For production, run through a minifier (CSS Minify) to strip whitespace.

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

@primary: #3b82f6;
@radius: 0.5rem;

.btn {
  padding: 0.5rem 1rem;
  border-radius: @radius;
  background: @primary;
  color: white;
}

Output

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #3b82f6;
  color: white;
}

Convert LESS to standard CSS. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

LESS can run directly in the browser via less.js, compiling stylesheets client-side without a build step.
Twitter Bootstrap was originally built with LESS in 2011, making LESS the preprocessor of choice for millions of projects.
LESS's JavaScript implementation can compile a 10,000-line stylesheet in under 100 milliseconds on modern hardware.

What does LESS give up when compiled to CSS?: Variables, mixins, nesting, arithmetic, and guards all get resolved. The output is a pure CSS file you can ship directly.
Are LESS escaping functions preserved?: e() and tilde-quoted strings evaluate to their unescaped value; the output is raw CSS with no trace of the escape.
How does nesting expand?: Each level becomes a compound selector. `.a { .b { color: red; } }` becomes `.a .b { color: red; }`. Parent references (&) resolve correctly.
Is the output dev-ready or production-ready?: Dev-ready. For production, run through a minifier (CSS Minify) to strip whitespace.