I’ve fought with this for a couple of days, mostly because I’m not a programmer — I’m a markup jockey. I’ve been using LessCSS for a few months, ever since I heard about it at HTML5.tx. If you’re unfamiliar with it, it’s a tool that adds things like variables and mixins to CSS. It makes theme development and modification a lot easier, and I really love it.
The Problem
The easy way to get started using LessCSS is to use the JavaScript implementation. This turns a lot of people (me) off, because the thought of forcing a mission-critical resource like CSS to rely on Javascript — which may or may not be available — is horrific.
The second implementation that they offer is based on Node.js, which I’d sincerely love to get into someday; but it’s largely C-based, which is beyond my standard skillset. I don’t want to have to implement a web server every time I want to sling a little style around!
The .Net Curveball
At FrogSlayer, we’re a .Net development shop. If I want the wizards with whom I work to be able to add some horsepower to the back-end of the pretty sites I make, it means I need to work with ASP.Net. Enter DotLESS.
DotLESS is a .Net implementation of LessCSS. There’s some very simple instructions available on their website that will have a programmer churning out .less stylesheets in no time flat.
FLAW: Programmers don’t (usually) write stylesheets. Designers do, and we’re the ones who are desperately trying to get this technology working! The assumptions made in all of the documentation I’ve seen — essentially everything about .Net that programmers know and designers don’t — stopped me dead in my tracks.
The Solution
I beat my head against this for a couple of days, drank several whiskeys and even cried a little bit — but I finally put together a quickie set of instructions for getting DotLESS working with a new ASP.Net w/ MVC3 web application. Here are my steps, recorded primarily so I can remember them. This assumes you have Visual Studio 2010 and MVC3 installed.
- Acquire DotLESS
- Go to https://github.com/dotless/dotless/downloads
- If you don’t want to use Git to download the source and build it yourself, just download the ZIP file containing the latest release.
- The only thing you really need is the dotless.Core.dll file in the ZIP file; extract it to your desktop.
- Open Visual Studio and create a new ASP.Net/MVC3 Web Application (I used the Internet Application template).
- Add the dotless.Core.dll file to the project (wherever you like; I usually add a root-level Resources directory for things like this).
- Make a reference in the project to the dotless.Core.dll file.
- In the Content directory, rename Site.css to Site.less
- In Views\Shared\_Layout.cshtml, change the stylesheet <link> tag from .css to .less
- Right-click Content directory
- Add > New Item… > Web Configuration File
- Replace the pre-generated contents with the following:
<?xml version="1.0"?>
<configuration>
<configSections>
<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" />
</configSections>
<system.web>
<httpHandlers>
<add verb="*" path="*.less" validate="false" type="dotless.Core.LessCssHttpHandler" />
</httpHandlers>
</system.web>
</configuration>
That’s it! Build and run the project, and you should be able to start rolling LessCSS into the Site.less file (or replace it altogether). Happy styling!
