{{ !articles[0].partner.isSponsoringArticle ? "Platinum" : "Portal" }} Partner

Browser Link + LESS? Does it work?

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

imageAt 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 to detect unused CSS. A rather sharp attendee came up to me afterwards and asked me, what happens with LESS? Does it do the same thing?

I went back and experimented with it – first was to setup some CSS that wasn’t used and test. Everything works as expected.

Step two, was to use LESS directly, so I setup the HTML with

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

<head runat="server"><br>
    <link rel="stylesheet/less" type="text/css" href="/Content/Awesome.less" /><br>
    <script src="Scripts/less-1.4.2.min.js"></script><br>
Next step was to configure IIS Express, using the web.config, to serve the LESS file. To do that I added the following to the web.config file:
    <mimeMap fileExtension=".less" mimeType="text/css" /><br>

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 Smile

Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks