Using LESS for advanced styling in .NET Web Application

What is LESS

LESS is a CSS pre-processor which extends the CSS language adding features that allow variables , mixins, functions and many other technique that allow CSS to be more maintainable, themable and extendable. It works more like a programming language. You can get more details of LESS from the lesscss.org. What I am trying to demonstrate here is how we can use the power of this programming language to make our CSS more dynamic and maintainable.

I am going to create an MVC5 application in VS2013 where I am going to review some of the dynamicity of LESS. Although for installing LESS you need Node Package Manager (npm) but here I am going to install a library that has been build by Christopher Owen, Erik Van Brakel named as dotlesscss. This library will add the necessary features for LESS usage and also will help us to avoid any deployment discrepancies related to LESS. I can install this library using NUGET command Install-Package dotless in my MVC5 application.

Let’s get started by creating a simple MVC5 application using VS2013.

In order to add the features of LESS in Visual Studio 2013 which can simplify the developers life, you can download the Visual Studio extensions for Web Essentials from the following link. If you want the same extension to be available for other Visual Studio Versions like VS2010, VS2012 you can find the available downloads from the following link.

image

Once you install the extension, the features of LESS will be available for the developers in Visual Studio IDE.

Now having your MVC5 application in place, lets run the install command from NUGET Package Manager Console to install the library of dotlesscss.

PM> Install-Package dotless
Installing 'dotless 1.4.1.0'.
Successfully installed 'dotless 1.4.1.0'.
Adding 'dotless 1.4.1.0' to Less.Training.Demo.
Successfully added 'dotless 1.4.1.0' to Less.Training.Demo.

The following library references will be added to the existing application

image

The web configuration file having dotless in the project add css minification and caching information.

Version of dotless library that got installed can be found from package.config file

Now we need the bundle for LESS to be available under ~/Content folder. So in order to do that let’s install the package System.Web.Optimization.Less using the NUGET command

Now we need to register the LESS bundle in our Bundle.cs file under ~/AppStart folder

 bundles.Add(new LessBundle("~/Content/less").Include("~
PM> Install-Package System.Web.Optimization.Less
Attempting to resolve dependency 'dotless (≥ 1.4.0.0)'.
Attempting to resolve dependency 'Microsoft.AspNet.Web.Optimization (≥ 1.1.2)'.
Attempting to resolve dependency 'Microsoft.Web.Infrastructure (≥ 1.0.0)'.
Attempting to resolve dependency 'WebGrease (≥ 1.5.2)'.
Attempting to resolve dependency 'Antlr (≥ 3.4.1.9004)'.
Attempting to resolve dependency 'Newtonsoft.Json (≥ 5.0.4)'.
Installing 'Microsoft.AspNet.Web.Optimization 1.1.3'.
You are downloading Microsoft.AspNet.Web.Optimization from Microsoft, the license agreement to which is available at http://www.microsoft.com/web/webpi/eula/aspnetcomponent_rtw_enu.htm. Check the package for additional dependencies, which may come with their own license agreement(s). Your use of the package and dependencies constitutes your acceptance of their license agreements. If you do not accept the license agreement(s), then delete the relevant components from your device.
Successfully installed 'Microsoft.AspNet.Web.Optimization 1.1.3'.
Installing 'System.Web.Optimization.Less 1.3.3'.
Successfully installed 'System.Web.Optimization.Less 1.3.3'.
Removing 'Microsoft.AspNet.Web.Optimization 1.1.1' from Less.Training.Demo.
Successfully removed 'Microsoft.AspNet.Web.Optimization 1.1.1' from Less.Training.Demo.
Adding 'Microsoft.AspNet.Web.Optimization 1.1.3' to Less.Training.Demo.
Successfully added 'Microsoft.AspNet.Web.Optimization 1.1.3' to Less.Training.Demo.
Adding 'System.Web.Optimization.Less 1.3.3' to Less.Training.Demo.
Successfully added 'System.Web.Optimization.Less 1.3.3' to Less.Training.Demo.
Uninstalling 'Microsoft.AspNet.Web.Optimization 1.1.1'.
Successfully uninstalled 'Microsoft.AspNet.Web.Optimization 1.1.1'.
/Content/*.less"));

Let’s add the following line of code in _Layout.cshtml file for rendering the LESS bundle

@Styles.Render("~/Content/less")

Now when you run the application you will get a runtime error although there is no compile time error.

The reason we are getting this error is because of handler section added in our Web.Config file

There are no .less files added in our ~/Content directory due to which we are seeing this issue. Let’s add a sample.less file in our application under ~/Content directory.

And also add the following section <validation validateIntegratedModeConfiguration = “false” /> in Web.Config file under System.webServer.

In sample.less file lets make sure we create a variable named @color which will have a predefined value and provide the style element for body having its color property to use the value assigned to the variable @color.

Now when I run the application before adding the *.less file, this is what the output looked like

Now I want to have all the font colors to be in red, so I had assigned the variable @color: #ff0000. Now lets run the application again.

Now what I would like to have is that all the header (h2) should be in black color and the paragraphs to be in blue color. We can achieve this without righting long selector names and using nesting feature of LESS which nest a selector to another selector which provides a clear inheritance.

So we changed our sample.less file with the following code

@color: #ff0000;
@headerColor: #000000;
@paragraphColor: #0094ff;

body{
color: @color;
padding-top: 50px;
padding-bottom: 20px;
h2{
color:@headerColor;
}
p{
color:@paragraphColor;
}
}

Having done the changes let’s run the application and preview the changes.

Well, there are lot of things we can do with LESS and I am sure you will enjoy working with it.

Leave a Reply

%d bloggers like this: