Using LESS Css for .NET with ASP.NET MVC 2

23 Jul

UPDATE: You can get LESS working on your .NET projects easier by using the Nuget package dotless.

This week I’ve trying out LESS Css, it’s a great tool for creating dynamic css. Christopher Owen, Erik van Brakel, Daniel Hoelbling and James Foster created a version of the LESS compliler for .NET, but there are no instructions on how to implement it with ASP.NET MVC. So, here it goes:

1. Download the dotless library

Got to http://www.dotlesscss.com or download directly from here.

2. Add a reference to dotless.Core to your MVC project

Right click on your project: Add reference: Browse for you dll.

3. Add the module on web.config

This is the trick part because my MVC app is using asp.net framework 4 and IIS7, so we can use the option “Integrated” for the Managed Pipeline Model (You can check it on Application pools, IIS). So, this said, the next part is referencing it on the web.config to use LESS’s httpHandler to handle all LESS files.

Add the following inside the system.webServer node:

<system.webServer>
		...
		<handlers>
			<add name="LessCssHandler" type="dotless.Core.LessCssHttpHandler,dotless.Core"   path="*.LESS" verb="*" />
		</handlers>
		...
</system.webServer>

4. Add configurations to the web.config

First add the section under the configSections node

<configSections>
	...
	<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" />
	...
</configSections>

Then add the configuration

<dotless minifyCss="false" cache="false" />

And we’re done! Now rename your css files to .LESS files and it should be running great!

6 Responses to “Using LESS Css for .NET with ASP.NET MVC 2”

  1. Josh 22. Feb, 2011 at 11:52 pm #

    In step # 3, don’t you have an extra “e” where it shouldn’t be? (should be name=”LessCssHandler” instead of name=”LessCessHandler” – right?)

    Reply
    • Karl Mendes 28. Feb, 2011 at 11:23 am #

      Thank for the heads up Josh. You’re right, I just fixed it.

      Reply
  2. Nicholas 11. Apr, 2011 at 10:40 pm #

    The download link isn’t working! Can you provide some mirror?

    Reply
    • Karl Mendes 26. Apr, 2011 at 11:15 am #

      Hi Nicholas, looks like since LESS released the JS version of it they stopped working on the .NET one. I’ll check to see if I can find a mirror.

      Reply
  3. steve 16. Feb, 2012 at 9:53 pm #

    the nuget package does all these web config transforms for you!

    Reply
    • Karl Mendes 18. Feb, 2012 at 2:41 pm #

      Yes! And it works really well. I should update the post with a link to the nuget package.

      Reply

Leave a Reply