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.

1. 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.
2. 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.
3. In the Content directory, rename Site.css to Site.less
4. In Views\Shared\_Layout.cshtml, change the stylesheet <link> tag from .css to .less
5. 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!

I’m working on a few other WordPress themes at the moment, and I’m trying to decide if I like Microsoft WebMatrix.  I’m sure it will come in handy for deploying some CMSes with which I’m less familiar, but it’s actually easier to deploy WordPress without it (using XAMPP instead).  The Visual Studio-esque file editor is nice, but get this — it lags. Seriously.  Both of my laptops have dual-core processors and 4 GB of RAM, and neither one should lag on text entry.

I think I’ll stick with Notepad++, thanks.

What’s going on?

This is typically referred to as the box model problem.  IE and FF interpret the padding element differently.  Chances are you’ve pulled up this article in a teeth-grinding search to correct the problem, so I’ll just make with the solution:

Add another <div> for your padding.

<div class=”TheStuffYouAlreadyHave”>
  <div class=”ThePaddingYouSeparated”>
    Content
  </div>
</div>

Support web standards! Go to WebStandards.org, educate yourself, and prevent articles like this from being necessary!