Using LESS on a .Net project

I was checking which CSS pre-processor to use on a .Net project and looks like LESS is the best option as it doesn’t require Ruby like SASS does. So here we go:

1. Install it using the NuGet package. Install dotLess, which is the one prepared for .Net projects, not the less.js one. Also install System.Web.Optimization.Less which we’ll need later.

2. Create a .less file at your Content root just as an example: default.less with this code:

@color: #0808b9; //blue
@errorColor: red;

h2 {
  color: @color;
}
p {
    color: @color;
}
    p.error {
        color: @errorColor;
    }

3. Now add a controller/action/view with this on the view:

<h2>Index</h2>
<p class="error">This paragraph should be red!</p>
<p>This should be blue!</p>

4. That was just to have something to display, to make LESS work you need to call the .less file on your page, you can just add this to the layout head:

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

5. Finally, the bundle to make that Render work, add it under App_Start/BundleConfig with the rest:

    bundles.Add(new LessBundle("~/Content/less").Include("~/Content/*.less"));

That should make it work, if not, this post from Brendan Forster helped me when I got blocked, have a look at it, it may have updates! 🙂