LESS CSS in .NET

Less css is kind of dynamic stylesheet language which is very helpful while designing css for any templates or forms.

As you are designing  any template, For example, the color which you are using is same as header, body or font etc.

So, Normal css would look like as follows.

body {
  color: #808080;
}
header {
  color: #808080;
}
#TestId {
  color: #808080;
}

For the above example, if you need to change the color then need to update the color manually. But if you are using the LESS css then it would be very easy to update the color in a dynamic way.

Note: LESS format file is the part of Web essentials in Visual studio. you can get the web essentials from the link Web Essentials


Now, I am going to explain how to add LESS file and its implementation process in sample MVC application.

Add a new item to the Content folder then select LESS Style Sheet, mention the name as Demo.less then the output screen would look like below.

you can declare an variable named as for example @TemplateColor  and assign the color value to that variable.

@TemplateColor: #808080;

After that , as you mentioned the above normal css and replace the color value with the variable like the below.

body {
    color: @TemplateColor;
}

header {
    color: @TemplateColor;
}

#TestId {
    color: @TemplateColor;
}

So, Now the complete sample LESS file is ready with the below format.

@TemplateColor: #808080;

body {
    color: @TemplateColor;
}

header {
    color: @TemplateColor;
}

#TestId {
    color: @TemplateColor;
}

After that, just save the file by pressing (Ctrl+S) then automatically the css and min.css will be ready in your solution.



Its very easy to change from one color to another by just updating the color for @TemplateColor variable instead of whole css.
Conclusion:

I hope this article gives you brief idea on LESS css with sample example.Please provide your valuable suggestions and comments if any.