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:
- A LESS editor which will also (automatically) compile your code into CSS.
- A CSS preprocessor that compiles your LESS files into a CSS style sheet.
LESS editor LESS2CSS
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.
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):
// LESS example of the use of a variable
border: 1px solid darken(@button-color, 15%);
The right pane of LESS2CSS will give you the correct CSS. Below you can also see (or check) what the CSS result will be:
border: 1px solid #a22727;
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
Begin by creating a project folder with 3 subfolders: css, less, js.
Open the html file and insert a link to the less-1.4.1.min.js file.
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:
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.
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.
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.