How to compile Sass and Less files?

Often Sass an Less file came as multiple files. The files separate variables and mixins which confuse beginners.

To start with Sass and Less you need a compiler. There are a few compilers but we will use Koala it’s free, cross-platform and support both Less and Sass.

Here is how to compile Sass and Less files with Koala?

  1. Download Koala.
  2. Install Koala.
  3. Put all Sass or Less files inside one folder.

Now let’s say you have single Less or Sass file.

Case of single Less or Sass file

  1. Open Koala.
  2. Drag and drop the folder contains the file need to be complied into Koala window.
  3. Right click on the file then choose compile.
Compile single Less or Sass file Koala
Compile single Less or Sass file Koala

Case of multiple Less or Sass files

  1. Follow the same steps 1 and 2 for single file.
  2. You need to import all the files into the main file, so let’s say you have main.less or sass as the main file and you have variable.less and mixin.less which contain variables and mixins. Open main.less with your code editor and at the top of the file write :
    @import "directory to your less files/variable.less";
    @import "directory of your less files/mixin.less";
    
  3. Don’t forget to change “directory to your less files”.
  4. Right click on “main.less” file then choose compile.

To Open the output directory (Css directory) Right click on any of your file and choose “Open Output Folder”.

Koala Open Output Folder
Koala Open Output Folder

 

Leave a Reply

Your email address will not be published. Required fields are marked *