Difference between Less and CSS ?

Many of you may be familiar with the concepts of CSS. In CSS we can not write loops ,logic or many other programming constructs such if-else etc.Thus we can say css is a static language.

On the other hand LESS or (SCSS) are CSS pre-processors. You can think of it as CSS with programming constructs, which help you in making your code modular and reusable.
One possible use case is you can develop a theme system with LESS, its very easy by using variables for colors etc and changing the variable values to create a new theme for your webpage.

Take a look at this example taken from Getting started | Less.js.


@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}


Compiles to


.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}



Also as a web engineer, LESS is a blessing in disguise.

1. It makes you more effective and efficient.
2. Code can be divided into modules and can easily be modified.
3. You can reuse many of the redundant parts of the code ex. you can write a function for giving rounded edges to elements, etc.

Do give it a try, you will definitely like LESS.
If any queries please write down in the comments if you get your answers please like and share.