What is Less?
Less is a CSS preprocessor. This simply means you write Less code which compiles and so pure CSS codes come from the other end. Less is the only preprocessor available but there are competitors such as Sass. I personally prefer Less over sass and I am sure you will also like Less as well. Less posses some advantages over Sass which made Less to be chosen by me. One of these advantages is “just pick up Less and you are ready to go”.

Note: Less officially does not stand for anything.

What is CSS (Cascading style sheet)?
CSS stands for cascading style sheet and it is used to style html documents. You may have learnt CSS as your second language in the web development kit after html itself, as I did. CSS is very easy to learn because CSS is not about learning it’s just about remembering as CSS is static language. You simply remember certain aspects and apply them again and again which makes you CSS guru in the end.

Why we do need Less?
After using css from a long time, we definitely realize that there should be certain changes in the way css codes written. Some of these are written below:

CSS is repetitive, we do need Less.
What the above line actually means? It simply means we write selectors again and again for styling our html documents and so we are writing our selectors repeatedly like shown below:

Example:

Let suppose we are going to style our main menu anchors, here is our code.

#main-menu a {
  font-family: ‘open sans’, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: orange;
}

And now suppose we are having a class of anchors in that main menu and want to style differently, so here is the code again.

#main-menu .stylish-anchors {
  font-size: 12px;
  color:  red;
  padding: 5px 3px;
//Note: (In this way the padding will be 5px top and bottom, 3px left and right)
}

And now suppose there is a span class inside that .stylish-anchors class and you want to make that span bold. Here is the code:

#main-menu .stylish-anchors span {
  font-weight: bold;
}

If you pointed out, we are writing our selectors (#main-menu thrice, .stylish-anchors twice) again and again. This means we are repeating our selectors.

Now we write same code using Less and so our code will be as shown below:

#main-menu {
  a {
  font-family: ‘open sans’, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: orange;
  .stylish-anchors {
  font-size: 12px;
  color:  red;
  padding: 5px 3px;
  span {
  font-weight: bold;
  }
 }
  }
}

That’s the all code looks like when we use Less. Oh, don’t worry dear it looks confusing but actually it’s nothing to be confused.

Explanation:
First of all we wrote #main-menu and opened and closed our curly braces. At that time our code was something like shown below:

#main-menu {

}

The above code snippet means every thing we will be putting inside that main menu selector. So, by now we targeted our main menu selector. Let’s target our a selector to style that. We just put a tag inside above code snippet and open and close our curly braces. Let’s have a look below:

#main-menu {
  a {

  }
}

That’s it, we targeted our anchor tag and now it can be styled.  We simply put our styles code inside anchor tag. Have a look below:

#main-menu {
  a {
  font-family: ‘open sans’, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: orange;
  }
}

Now we will be styling stylish anchor tag class. As that class is inside anchor tag so we put that class inside anchor tag to understand better have a look below:

#main-menu {
  a {
  font-family: ‘open sans’, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: orange;
  .stylish-anchor {

 }
  }
}

What we did? Simply we added our class inside anchor tag and now stylish-anchor class can be styled with ease now. Look at the code snippet below:

#main-menu {
  a {
  font-family: ‘open sans’, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: orange;
  .stylish-anchor {
  font-size: 12px;
  color:  red;
  padding: 5px 3px;
  }
  }
}

Point to note here is that we are targeting our selectors in a chain. For example if we have to target stylish-anchor class, we follow the below sequence.

#main-menu > a > .stylish-anchors

Now you’ll be wondering that how simple is that. Let’s style our span now, where to put span selector now?

Yes, you got it. Absolutely, it will reside inside stylish-anchors class. That’s the code snippet below now:

#main-menu {
  a {
  font-family: ‘open sans’, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: orange;
  .stylish-anchor {
  font-size: 12px;
  color:  red;
  padding: 5px 3px;
  span {
  font-weight: bold;
  }
  }
  }
}

I hope you understand now what we did. If you are not convinced yet you may have a look again to better grasp the concept. Once you write these lines and compile above code, you will realize that same CSS code comes out as we already written. Hurrah! We have written Less code to achieve the same functionality.

If you still can’t understand how did we written above code snippet using Less, don’t worry you will learning all that skills in this series of less tutorial. By now just remember that css is repetitive and so we need less.

CSS missing variables, that’s why we need Less.

As you know we can’t use variables in CSS, while variables make programmers life a lot easier. How? Have a look below:

Let suppose we are writing following codes:

h1 {
  font-family: ‘open sans’, sans-serif;
}
p {
  font-family: ‘open sans’, sans-serif;
}
a {
  font-family: ‘open sans’, sans-serif;
}

Simply, we are writing whole font family again and again. But if we can store that value in a variable and so that variable can be used instead of a long family name each time, is it possible? Yes, it will make life easier; fortunately this is possible in Less. Hence, we conclude that “CSS don’t have variables, we do need Less”. We will be discussing using variables in Less, in next part of this course.

Note: to understand variables usage in Less, just go to variables in Less.

There are a lot of other features too, which CSS don’t have but we can use in Less like mixins, functions etc …

We’ll be learning all these techniques throughout this course just go through the series and you have done.

What our company achieved with Less?
We are web developers and so every bit of time we can save is a huge bonus for us. Before Less we were simply writing our styles in CSS and our files having thousands of lines is very normal to us. Last ten 10 projects we completed in Less we came to know that we saved up to 32% of our time in writing styles in less.

Mathematical explanation:
As we save up to 32% of our time, let suppose the lines in css file are 5000. With Less these lines will be 3400 which means time saved for 1600 less.