LESS to CSS Compiler

How it works

An old Bootstrap 3 theme or a WordPress template is often written in LESS, and browsers cannot read LESS: it has to be compiled to plain CSS first. Paste the code into the left box. On the right, variables such as @main-color are replaced by their values, mixin calls such as .shadow(8px) are replaced by the rules they contain, nested rules are flattened into selectors like .card h2, and colour functions such as darken(@main-color, 10%) are calculated into a colour code like #08427d. Operations like (@spacing / 2) are worked out too: half of 16px becomes 8px. Readable output is indented with 2 spaces; choose Minified to drop spaces and comments and get one line. If the code uses an undefined variable or leaves a curly bracket open, nothing is compiled and you see the line and column of the problem. The result line shows how many lines of LESS became how many lines of CSS, and the output size in bytes. Content pulled in with @import from another file cannot reach this page; paste that file's text as well.

This tool is also known as less to css, less to css converter, less compiler online, compile less online, lessc online, convert less to css.

What is LESS?

LESS (Leaner Style Sheets) is a preprocessor language that adds variables, mixins, nested rules and colour functions to CSS. It appeared in 2009, and Bootstrap 3 plus thousands of themes built on it were written in LESS. Browsers cannot read a .less file directly; a compiler swaps variables for their values, flattens nested rules and produces a plain .css file.

What is Mixin?

A mixin in LESS is a named group of rules that you reuse inside other rules: .shadow(@depth) { box-shadow: ... } is written once and then called as .card { .shadow(8px); }. When the code is compiled, the call is replaced by the properties inside the mixin, filled in with the values you passed. You do not have to write the same shadow ten times to use it in ten places.

What is the difference between LESS and SCSS?

Both are preprocessors that add variables, mixins and nested rules to CSS, and they do the same job; the difference is syntax and ecosystem. LESS writes variables with @ (@color), SCSS with $ ($color). In LESS a mixin is called like an ordinary class (.shadow();), in SCSS you need @mixin and @include. Bootstrap 3 used LESS, Bootstrap 4 and later moved to SCSS, so today you mostly meet LESS in older themes and projects.

Why are my @import files not compiled?

This page compiles only the text you paste; it cannot read other files on your computer or on a server, because your code is never sent anywhere. That is why a line like @import "variables.less" gives a "file cannot be read" error. The fix is simple: copy the content of the imported file and paste it in place of the @import line. To build a multi-file project such as Bootstrap, use the project's own build command (lessc).

A CSS import written with url(...), such as a Google Fonts address, is not compiled but passes through to the output unchanged; the browser loads it when the page opens. Inline JavaScript (expressions in backticks) is off by default in less 4 and does not run on this page either.

Readable or minified?

Readable output is right when you want to inspect the compiled CSS, see where a rule comes from, or leave LESS behind and continue in plain CSS. Minified output is for the file that goes on the live site: spaces and comments are removed and the file gets smaller.

If you are moving away from LESS, take the readable output. Values replace the variables, so changing one colour later means editing several lines; CSS custom properties (--main-color) are a good replacement for that.

• Seeing the compiled code, switching from LESS to plain CSS → Readable
• Uploading to the live site → Minified
• Multi-file Bootstrap project → the project's lessc command

Frequently asked questions

How do I convert a LESS file to CSS?

Copy the content of the .less file and paste it into the left box on this page. The compiled CSS appears on the right; copy it or download it as a .css file. If the file imports other .less files, add their content to the text as well.

What does "variable is not defined" mean?

A @variable used in the code is not declared anywhere in the same text. Variables usually live in a separate file (such as variables.less) that is pulled in with @import; paste that file's content too and the error goes away.

Can I compile SCSS or Sass too?

No. SCSS has a different syntax ($variable, @include) and needs a different compiler. This page compiles LESS only; if you just want to indent SCSS, the CSS formatter does that.

Is my code sent to a server?

No. Compiling runs entirely in your browser; the code you paste never leaves this page and is not stored anywhere.