Blog

Introduction to LESS (CSS Framework)

The day we have started using CSS for enhancing the look and feel of our HTML websites, we found it quite interesting and in a gradual process, it has changed the way our websites appear.

Day-by-day the CSS can be a bit frustrating to write, especially when it comes to more serious projects with thousands of lines of code. We have to duplicating the same rules all over the place and it takes a lot of effort and discipline to keep your CSS maintainable. So we end up with a new CSS framework called “LESS” to improve the normal CSS coding.

LESS is an extension of CSS. It is also known as CSS pre-processor. Less is written in JavaScript, and needs either Node.js or a web browser to run.

Where should I start learning LESS?

Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly. Here’s a quick overview of features.

1) VARIABLES in LESS

Lets go through the following traditional CSS that we are presently using:

4) Operations

You can do basic math operations to numerical values and colors. Lets say we want to have two divs placed next to each other, the second one is twice as wide and with a different background. LESS knows what the measuring units are and won’t mess them up. Below is an example of LESS operations.

7) Namespaces and Accessors

Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in Less. Say you want to bundle some mixins and variables under #bundle, for later reuse or distributing: