Up and running with Less (ASP.NET MVC)

Up and running with Less (ASP.NET MVC)

I don't think that Less is that common in the ASP.NET community, and that's my reason for this blog post.

So what is less?

Less is a dynamic stylesheet language. It extends the CSS with dynamic behavior such as variables, mixins, operations and functions. Want to know more check out lesscss.org.

But how do i use Less with Visual Studio?

Go download the free Mindscape Web Workbench. This is a Visual Studio plugin, that enables Less templates in VS, and a lot of other stuff:

• Syntax highlighting (all languages)
• Intellisense (Sass & Less)
• Automatically generates the required output (e.g. .JS for CoffeeScript, .CSS for Sass)
• Collapsable code blocks
• Supports also Visual Studio 2011

After finished installation and a restart of Visual Studio you should see this in the "Add new item" menu:

Make a Less Style Sheet called styles.less, or whatever you like and place it in the styles folder.

Hit ok and look how awesome this is, Mindscape Web Workbench (try to say this three times fast) made support for .less files.

Reference your styles.less in your _layout.cshtml file. (Make sure you set the rel="" to stylesheet/less).

<link rel="stylesheet/less" type="text/css" href="@Url.Content("~/content/styles/style.less")">

Now go fetch the latest less.js file from lesscss.org.

Put the less.js file in your scripts folder in your solution. Reference the less.js file from the _layout.cshtml page and make sure you include your stylesheets before the script.

<script src="@Url.Content("/scripts/less-1.2.1.min.js")" type="text/javascript"></script>

Open up your styles.less file and add the following:

@productname-blue: #547980;

.productLink { color: @productname-blue }

Look at the awesome intellisense support we got.

It Works!

Assign the .productLink to a link tag like this:

<a class="productLink" href="#">T-shirts</a>

Run your application and open up firebug.

Now you are running Less in your ASP.NET MVC application.

Have a look at the Less Documentation for further information about less.

Click here to download the source for this post