Less Tutorial for Beginner : Understanding Less

What is Less?

Less is a CSS pre-processor which allow us to write css easily, to manage heavy css professionally  and to make css dynamic by using variables, mixins, functions, operators, nesting etc. You may have faced rule replacing problems while coding for large websites, but with less your every selectors will be unique, there won't be any chance of rule replacing if you understand basic of less and finally you'll do more with Less.

Getting Started

This pre-processor is written in JavaScript and you need any web browser or Node.js server to run this. I believe, as you are developing website and application, I don't need to explain more about web browser and node.js.
The first step to get started is download less.js from its official site or from Github. You can also use cdn, if you don't want to host on your own server.

For node.js users, just go to your terminal/command, type following and hit enter.

$ npm install -g less

Now you got less.js file, the next step is to include this less.js in your project. Go to end of the your html file, add this less.js just before closing body tag (you can use this just after jQuery) as regular JavaScript/jQuery library.

<script src="less.js"></script>

Now you have to define which .less file is need to be compiled to css. To define this go to head and add like this as I am compiling style.less to style.css

<link rel="stylesheet/less" type="text/css" href="style.less" />
<link rel="stylesheet/css" type="text/css" href="style.css" />

Inside css folder in your project directory, make one file style.css and another style.less. Now all you will need is style.less (you don't need to touch style.css)

Let's write something css rules in style.less and check your style.css file. There is nothing right? Ok we have one more thing to do before enjoying the magic of less. We have to tell less to compile style.less to style.css. For that we have two options generally. The first is using command line. Open your terminal from same directory or locate to your working directory and type

lessc style.less > style.css

If you hit enter, your less file will be converted to plain vanilla css which is supported by any web browser.

If you are not familiar with command line, no need to worry as there are numbers of Graphical User Interface (GUI) to compile your .less files into .css . Here in this tutorial, I am going to guide you one of the most popular Less GUI, WinLess.

First you need to download WinLess from it's official site. Once you download it, install it as other software you do. If you have successfully installed WinLess , now open this software and you will see button “add folder” click there and add your project folder there. Refresh and compile. You don't need to repeat same process again. It compiles automatically.

Less Variables

Variables is one of the best and most used features in any preprocessor. The different is only how to define it. With variables we can define a value and use that in multiple places. For example, most of the websites has one primary color (brand color). We can define brand color as
@brand:#188B87;
Now we don't have to write this hex code instead write @brand wherever this color is needed. That's fun. Now let's say your client want different color for his brand, just replace the value for your variable @brand that's all.
See example below if you haven't understood yet.

@blue: #5B83AD;
@light-blue: @blue + #111;

#container{
  color: @light-blue;
}

Output should be

#container{
  color: #6c94be;
}

Nesting

Nesting is another great feature in many preprocessor including Less. Nesting helps to structure our css just like HTML. This feature helps to reduce style conflicts and to manage code easily as it creates unique selectors for each elements.
For example, you have a paragraph inside a div and that div is wrapped with section. Here you will first write css for section then div and paragraphs like this.

section{
  background-color: #03A9F4;
  padding: 10px;

  div{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
     p{
      font-size:14px;
      color:#666;
      }
  }
}

Output will be

section {
  background-color: #03A9F4;
  padding: 10px;
}
section div {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}
section div p{
  font-size:14px;
  color:#666;
}

Mixins

With muxins, we are allowed to use css defined for a id or class to another elements. Suppose, we have defined css for .button-default and we want same button with red background for .button-red. Here we just need to apply background color red and using default button for other styles like borders, box shadow, color etc.
Example

.button-default {
    background: #f0f0f0;    
    color: #666;
    padding:5px 12px;
}
.button-red{
    .button-default;     
    background: #FF0000;
}

Output

.button-default {
    background: #f0f0f0;    
    color: #666;
    padding:5px 12px;
}
.button-red{
    color: #666;
    padding:5px 12px;    
    background: #FF0000;
}

Operations

With less we can do basic math to numerical values and color. Suppose, we want three divs inside another div. One div need to be halved of the outer div and other two divs ¼ each. In this can we can use less operations as:

@outer: 800px;

#outer{
  width: @outer;
  background-color: @color - 100;
}

#half{
  width: @outer / 2;
}

.one-by-four{
  width: @outer / 4;
}

CSS Output

#outer{
width:800px;
}
#half{
width:400px:
}
.one-by-four{
width:200px;
}

Less Functions

Sounds like a programming language right? I would like to say it as css programming knowledge. With less we can do various functions to reduce time, increase efficiency and manage codes more professionally. Here is a basic example of less function.

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

CSS Output

div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}

I believe you have learned a lot about less and might be willing to know more tips, tricks and ideas to boost your skill. This chapter is enough if you work on small sized of projects but if your products are too large and if you are crazy to learn everything in depth, keep visiting I am working on more advanced less tutorial.