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

 

Setting up the Bootstrap working environment

How to setting up a working place for Bootstrap websites?

Required software:

  1. Code editor for writing HTML, CSS, JavaScript and Less or Sass. You can use whatever you like for example Dreamweaver and Notepad++ but I recommended Sublime Text to start as a pro. In this tutorial we are going to use Sublime Text 3.
  2. Image editor, here I recommended the one and only image editor Photoshop. Don’t waste your time with other image editors. However there is GIMP which is free but quite complex program. It is work even with PSD (Photoshop’s native file format).

Required files:

Of course we need Bootstrap’s files themselves. Bootstrap came with 3 flavor the first one with necessary CSS, JavaScript, and fonts. The second one came with the same files as the first one and additionally Less files. The flavor as the second one but with Sass files instead of Less.

If you know how to Less or Sass go with the second or the third flavor. But this is not necessary. Most of the time the first flavor is enough.

You can also customize Bootstrap before downloading it.

Optional software:

To compile Sass or Less you need additional software.

For Sass:

  • CodeKit (Paid) – Run in Mac.
  • Compass.app (Paid, Open Source) – Run in windows, Linux and Mac.
  • Hammer (Paid) – Run in Mac.
  • Koala (Open Source) – Run in windows, Linux and Mac.
  • LiveReload (Paid, Open Source) – Run in windows and Mac.
  • Mixture (Free) – Run in windows and Mac.
  • Prepros (Paid) – Run in windows and Mac.
  • Scout (Open Source) – Run in windows and Mac.

For Less

  • Koala (Open Source) – Run in windows, Linux and Mac.
  • Simpless (Open Source) – Run in windows, Linux and Mac.
  • Less.js (Open Source) – Run in windows, Linux and Mac.

I highly recommended using Koala as it is free and compiling both Sass and Less and cross-platform i.e. run in windows, Linux and Mac.

How to compile Sass and Less files?

Setting up the working environment:

Now you should have all software, files needed I will assume you have Sublime Text 3 as a code editor and the necessary CSS, JavaScript, and fonts. Same steps apply for any code editor you choose.

If you choose to download only the compiled and minified CSS, JavaScript, and fonts, you will get a file named “bootstrap-3.3.4-dist.zip”. The 3.3.4 is the current version of Bootstrap. Same steps apply for any version of Bootstrap.

First thing to do is to extract the zip file. Inside the extracted folder there are 3 folder named css, fonts and js which all are necessary for bootstrap site.

Next create a project folder and name it whatever relevance to your project or website. I will call it “bootstrap-project”.

Copy the 3 extracted folder css, fonts and js and paste them inside bootstrap-project folder.

Open your code editor. (I use Sublime Text 3).

Drag the project folder to Sublime Text 3 window.

Bootstrap project tutorial
Bootstrap project folder inside Sublime Text 3

Create the first HTML file and name it index.html this file should be inside the main directory not inside any sub-folder.

Write the following code inside the head tag:

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

The previous code add the minified version of Bootstrap’s CSS. It is recommended to use the un-minified version “bootstrap.css” if you are going to edit the file.

Write the following code inside the body tag:

<!-- Compiled and minified JavaScript -->
<script src=js/bootstrap.min.js"></script>

The previous code add the minified version of Bootstrap’s JavaScript file.

Write the following code inside the body tag just before the last code we add:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

The previous code add the necessary jQuery file. This file is hosted by Google CDN.

Write the following code inside the head tag:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

As bootstrap official website recommended that the above 3 meta tags *must* come first in the head; any other head content must come *after* these tags.

If you are going to support IE8 and IE9 add the following code at the end of  the head tag: (Optional)

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Now you should have index.html which look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Project</title>

    <!-- Compiled and minified CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Compiled and minified JavaScript-->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

That’s it guys.

If you have any question please post it in comment.