Bundling & Minification with dot-less (dynamic CSS for .NET) in MVC 4

September 26, 2012  /  2 responses

LESS is the dynamic style sheet language LESS extends CSS with dynamic behaviour such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

.less is the LESS JavaScript library implementation for .NET, Find more info about .less at http://www.dotlesscss.org/.

This article is going explain how to use bundling & minification with dotless. Let’s create a new ASP.NET MVC 4 Project with Internet Template (File => New Project => Visual C# => Web => ASP.NET MVC 4 Web Application => Internet Application).

Now add the dot-less support to project using NuGet (Right Click on Project => Choose Manage NuGet Packages… from context menu => in “Search Online” textbox search for dotless=> Choose dotless package =>Install).

.less package will add couple things to projects like few entries in Web.config & dotless.Core.dll to references.

Let’s add couple of .less styles sheets to our project.

1. Create a new folder “LessStyles” under project.
2. Add the .less files to “LessStyles” folder.

Out of the box there is no support for .less. To implement bundling & minification with .less we should implement IBundleTransform (Defines a method that transforms the files in a BundleResponse object.) interface in class to process the .less.

dotless.Core.dll will provides class Less with Process() method  which gives us the CSS. Add a LessTransform class under App_Start folder which implements IBundleTransform interface.

using System.Web.Optimization;
using dotless.Core;

public class LessTransform : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response)
    {
        response.Content = Less.Parse(response.Content);
        response.ContentType = "text/css";
    }
}

Create a bundle of LESS files with the LessTransform and the CssMinify transform. Add the following code to the RegisterBundles() method in the App_StartBundleConfig.cs file.

using System.Web;
using System.Web.Optimization;

namespace DotLessSample
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            var lessBundle = new Bundle("~/MyLess/Styles");

            lessBundle.Include("~/LessStyles/Menu.less");
            lessBundle.Include("~/LessStyles/Styles.less");

            lessBundle.Transforms.Add(new LessTransform());
            lessBundle.Transforms.Add(new CssMinify());

            bundles.Add(lessBundle);
        }
    }
}

Now add @Styles.Render(“~/MyLess/Styles”) to any views which references the LESS bundle. Change compilation element attribute debug=”true” in the Web.config file or add BundleTable.EnableOptimizations = true to the RegisterBundles() method in the App_StartBundleConfig.cs file.

Bundling & Minification both are work fine with .less style sheets also.