glasses-logo

<dominikgorecki> Web development on the Microsoft Stack <dominikgorecki>

Using LESS with ASP.NET MVC

There are several option in implementing LESS (the dynamic style sheet language) with your asp.net MVC application. While MVC 4.5 provides bundling and, with that, minification, it still does not provide the same dynamism as LESS; that being said, you can take advantage of both using the following technique.

WinLess Logo

An aside for those unfamiliar with LESS: it’s a dynamic stylesheet language that allows you to extend CSS to allow variables, “mixins,” operations and function. It’s a powerful tool that can help decrease dev time while making your style code more robust. It allows you, for example, to declare a variable for your main and accent colors at the top of the style sheet so that when you want to change the palette of your entire site, you can do that by editing three or four lines. That alone deserves great props. More info on http://lesscss.org/

So if you’re familiar with LESS you’ll know that you have 3 options: implement LESS on the client-side, dynamically on the server-side, or compile to CSS. There may already be some Asp.net LESS compilers our there (and if there isn’t, there should be), but my favorite option is the simplest: compile to CSS.

I use the program winless to watch the content folder of my MVC application where I have my .less file. I then add the compiled .css to the bundle(s). That’s it! Now anytime I make a change to the .less style it will automatically get compiled to the CSS file which my bundles use. No mess; no fuss.

Perhaps the most elegant solution would be if we have a LESS parser with the bundling implementation, but this is a pretty painless solution as well.

Reference:

 

 

 

Leave a Reply

Open Menu Button