Time for action – compiling LESS into CSS using Koala

Perform the following steps to compile LESS into CSS using Koala:

1. Add the project directory in the Koala sidebar, as follows:

   

2. Select all the style sheets except frameworks.less and style.less. Right-click and select Toggle Auto Compile. Have a look at the following screenshot:

   

   This will turn off the Auto Compile option on the selected style sheets and prevent Koala from compiling these style sheet unintentionally.

3. On the other hand, ensure that Auto Compile is checked for the two remaining style sheets, frameworks.less and style.less:

   

4. Make sure that the frameworks.less and style.less output is set to /assets/css directory, as shown in the following screenshot:

   

5. Check the Source Map option for both style sheets to generate the source map files, which will help us when debugging:

   

6. Select the output styles for the two style sheets, frameworks.less and style.less, to compress:

   

   This option will generate a small-sized CSS style sheet, as the codes within...