Browser Link + LESS? Does it work?

Published on 01 November 2013 Estimated reading time: 2 minutes

(You can grab the code for this from: https://github.com/rmaclean/BrowserLinkAndLESSDemo)

At TechDays in Johannesburg, I showed a lot of cool stuff, but this post is about two specific pieces of awesome technology—Browser Link & LESS. In my talk (you can watch a video of it here)—I showed off how you use Browser Link with Web Essentials—it can detect unused CSS. A rather sharp attendee came up to me afterward and asked me, what happens with LESS? Does it do the same thing?

I went back and experimented with it—first was to set up some CSS that wasn’t used and test. Everything worked as expected.

Step two was to use LESS directly, so I set up the HTML with:

I used NuGet to pull down LESS.js
I put in the link to the LESS file

<head runat="server">
    <title></title>
    <link rel="stylesheet/less" type="text/css" href="/Content/Awesome.less" />
    <script src="Scripts/less-1.4.2.min.js"></script>
</head>

Next, I configured IIS Express using the web.config, to serve the LESS file. To do that, I added the following to the web.config file:

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".less" mimeType="text/css" />
  </staticContent>
</system.webServer>

And I ran the app again. You know what happened? It all just worked—Browser Link’s CSS logic detected the unused class in the LESS file, and when I clicked it, it took me directly to the class in the LESS file 😊