LESS code compilers

When you’re learning LESS you can use a simple tool like WordPad. But you may prefer an editor specifically made for LESS. You’ll certainly need a tool to compile (also called: preprocess) your LESS code into CSS. Because a browser isn’t able to handle LESS code without a bit of help.

So in this tutorial we’ll look into LESS code compilers.
In this tutorial about LESS code compilers you will learn:

  1. A LESS editor which will also (automatically) compile your code into CSS.
  2. A JavaScript script that compiles your LESS file directly in the browser.
  3. A CSS preprocessor that compiles your LESS files into a CSS style sheet.


One of the best tools in my opinion to use when you start learning LESS is the LESS2CSS editor and compiler.
When you visit/open LESS2CSS you see a pane on the left with LESS code and a pane on the right with the result when the code is compiled into CSS.

less2css screenshot

Insert the code below into the left pane (you need to delete/replace the code that’s already shown in the left pane of LESS2CSS):

The right pane of LESS2CSS will give you the correct CSS. Below you can also see (or check) what the CSS result will be:

There is one thing that I would like to draw your attention to. As you can see we have one line with a comment in the LESS code. After compiling the code we do not see the comment displayed in the CSS pane. This is because we inserted the comment in LESS with //.

If you in fact do want your comment to show in CSS you should use /* and */ around it. So when you write your own LESS code you can use this distinction to manage which comments you only want to appear in the LESS file and which comments you also want to see in the compiled CSS file.

If you make a mistake while writing LESS code LESS2CSS will give you a warning in the right pane (“Unrecognized input”). This error message will also appear when you start inserting keywords while they are not completed but will disappear as soon as your LESS keywords and code make sense.

LESS2CSS is great when you want to practice writing LESS code. But you cannot save what you write and importing a LESS file is also not an option with LESS2CSS.

Compiling LESS in a browser

Another option is to use a JavaScript that will compile a LESS file directly in a browser.

Begin by creating a project folder with 3 subfolders: css, less, js.

Visit the website lesscss.org and download the file “less.js” by clicking on the red button. Clicking on the red button opens a new window with JavaScript. Right-click on the this JavaScript and save the file “less-1.4.1.min.js” in the js subfolder of your project.

Open the html file and insert a link to the less-1.4.1.min.js file.

Warning! Make sure you include your stylesheets before the script.

Notice that the first link uses ‘rel=”stylesheet/less“‘ but after that we see ‘type=text/css“‘

CSS Preprocessing with Crunch

The third option that I want to show you is the use of Crunch to compile LESS files outside of the browser and generate a CSS style sheet which can be linked to your HTML file(s).

You can download Crunch by clicking on the orange download button on the website crunchapp.net.

Install Crunch with a double-click on the Crunch installer package.

When you start Crunch you will see this opening screen:

Crunch opening screen

Drag your project folder on the opening screen and you will see that your project folders and files will become displayed on the left-side of the screen.

Crunch with project folder

Double-click on the LESS file to have it open on the right side.

Crunch can also serve as a LESS editor. After you have opened a LESS file you can make change to it. This is a major advantage compared to other GUI LESS compilers.

Click on the button “Crunch File” (top right). Crunch then takes the content of the .less file, parses it, and gives a .css file as the output with the compiled CSS styles.

Crunch serves as a front-end for the JavaScript file we discussed earlier on in this tutorial. So it’s the same script that does the work but with a friendlier face.

By default Crunch creates a minified CSS file. If you prefer an unminified CSS file you need to click on the settings icon (indicated in the image above with a red arrow) and open another panel.

Add your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.