Compile LESS to CSS

This online tool will compile your LESS code into standard CSS, ready to use directly within your webpages or as an external stylesheet. LESS is a dynamic stylesheet preprocessor that extends CSS with features like variables, nesting, and reusable expressions, making it easier to write and maintain complex styles.

When you compile your LESS code using this tool, all variables that begin with the @ symbol are automatically resolved and replaced with their corresponding values in the generated CSS. The result is clean, browser-ready CSS that works seamlessly without any additional preprocessing.

This tool is perfect for developers who want to quickly convert LESS into production-ready CSS, simplifying workflow while maintaining the benefits of variables and other LESS features.

Less code

Open file

CSS code

Everything is worked out in your browser and nothing is uploaded.

How to use it

The less to css compiler is a webtool that is designed to compile your less code to css code.

Enter your LESSType or paste the less code you would like compiled into the Less code box, or choose Open file to load a .less file.
Or try the sampleIf you need to check out how this tool works first, click Sample code to see what happens.
Read the CSSYour code is compiled into a css stylesheet on its own while you type. If something is wrong, the line and the problem are shown under the boxes.
Copy or downloadOnce it has been compiled, you may copy the code to the clipboard or download a code.css file.
Use itYour newly compiled css code can now be used in your projects.

Good to know

Variables and functions

Variables, nesting, mixins, operations and functions such as darken() and lighten() are all worked out for you in the CSS.

No imports

The @import and @plugin rules are not supported, as they would load other files. Paste the code from those files into the box instead.

Errors

When the LESS has a mistake, such as a missing } or an undefined variable, the message and line number appear under the boxes and the last good CSS is dimmed.

Frequently asked questions

What is LESS?

LESS is a stylesheet language that is compiled into normal CSS. It adds variables, nesting, mixins and functions, so styles are easier to write and maintain.

Why does the compiler show an error?

The message comes from the LESS compiler. Common causes are a missing } or ;, a variable that was never defined, or a mixin that does not exist. Fix the line shown and it compiles again.

Does it work with my own @import files?

No. The tool works only on the code in the box. Paste the contents of the files you import above your code, and remove the @import lines.

Is anything uploaded?

No. The code is compiled in your browser, so it never leaves your computer.