Keeping CSS Files DRY with .less

Sunday, November 22, 2009

dotless - a LESS css port for .NETIt was just a few weeks ago when I heard of LESS for Ruby, and now there a port for .NET developers: .less (dot less).

One of the frustrating aspects of working with CSS (one of many, actually) is the amount of duplication in a .css file. CSS does allow us to separate content from presentation, but, if I had a nickel for every time I did a search and replace for some hexadecimal RGB code replicated 5 times in a CSS file, I’d buy each of you an interactive t-shirt.

.less help to keep your CSS files DRY using 4 constructs:

  • Variables
  • Mixins
  • Operations
  • Nested Rules

The examples on the .less home page are self-explanatory. For example, variables:

@gold : #cccc99;

body {
  background-color: @gold;
}

“Mixin” is a Ruby concept, and with .less the you can “mix” one style rule “into” another.

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#header {
  .rounded_corners;
}

How’s It Work?

You enter your styles into a file with a .less extension and include them in a view or web form just like any style sheet.

<link href="/Content/Site.less" rel="stylesheet" type="text/css" />

An HTTP handler is configured to respond to requests for the .less files.

<httpHandlers>
    
  <add validate="false" path="*.less" verb="*"
    type="dotless.Core.LessCssHttpHandler, dotless.Core" />
              
</httpHandlers>

When a request arrives for a .less file it is the handler’s job to parse the .less file and transform it into standard CSS rule sets. .less does this using PEG Lib and offers the ability to both minify and cache the resulting CSS.

The source code is available on GitHub, so check it out for yourself. .less will let you write lean, mean style sheets.


Comments
gravatar Gordon Breuer Monday, November 23, 2009
Great find, I will have a crack at it with my current project. Sometimes I ask myself why such obvious things weren't invented a long time ago...

BTW: Your first link to .less is the same as to LESS for ruby - it should be http://www.dotlesscss.com/ :)

Greets, Gordon
gravatar Scott Allen Monday, November 23, 2009
@Gordon - Thanks for the bug report :)
gravatar Steve H Monday, November 23, 2009
The biggest difference I see from the Ruby implementation is that a handler is created in .Net to generate the resultant .css. This is done at runtime.

Ruby's implementation generates static css files that are served up by the webserver.

So my question is - aside from runtime file generation, what other benefits exist from the approach?
gravatar Erik van Brakel Monday, November 23, 2009
I had a huge comment in here, but subtext errored on me. So I'll just link to my blog. I've written a small story on how we came to do the .NET version:
blog.smoothfriction.nl/...

Summary:
It's quicker, easier to deploy for a .NET dev.
gravatar Scott Allen Monday, November 23, 2009
@Erik: Sorry for eating your comment. Thanks for linking to the background info.
Joel Coehoorn Monday, November 23, 2009
Cool, I've been hoping someone would port this ever since I saw it for Ruby. The only only thing I'd like better is a Visual Studio t4 add-in so would could build the css files once at compile time (and even minify them) rather than at run time.
gravatar tbmedia Monday, November 23, 2009
Interesting find, thanks very much. @Scott Allen - no offence dude but you need to update the theme on this blog, it's grim at best :)
gravatar tbmedia Monday, November 23, 2009
Interesting find, thanks very much. @Scott Allen - no offence dude but you need to update the theme on this blog, it's grim at best :)
gravatar Steve H Monday, November 23, 2009
I agree completely and wholeheartedly with Joel.
gravatar Scott Allen Monday, November 23, 2009
@tbmedia - Grim!?!?!? :( What is it - the colors?

@Joel, @Steve - I can't imagine this would be too difficult with T4, or even a custom MSBuild step. I might look at it, unless they get to it first.
gravatar Chris Owen Monday, November 23, 2009
@Steve H I doubt you'll be the last person to ask this, but here's my take on it.

- Not everyone in the .NET sphere will/can install Ruby on their dev machines.

- The ruby impl has trouble parsing Less files created in VS so they need to be built in some other editor.

- We want to adhere to the Less syntax as much as possible, but we are now at a point where we can take things further.

@Joel, @Steve With regards to the HttpHandler, the DotLess projects comes with an executable that allows you to create CSS from an input file so hooking this up to a build scripts should be a 10 min job.

I do have to say however, that as the HttpHandler supports caching then your not loosing anything much performance wise.

Additionally, we are looking to add the ability to pass query string parameters(and environmental info) to the handler to be used as variables in the Less file.This obviously woludnt be possible as a static compilation step.
Brad Monday, November 23, 2009
I'm confused about the mixins. How is that different than just making more granular classes and referencing multiple classes from elements?
gravatar Chris Owen Monday, November 23, 2009
@Brad in on themselves they are actually not much different than simply adding lots of granular classes. But even like this, if you've ever used blueprint you'll have seen elements like this:

class="span-15 prepend-1 colborder"

Using Less/DotLess you can merge these in to something more meaningful.

Also mix-ins can be used to bring in sections of nested rules with namespaces i.e:

.outer{
content:"ignore me";
.inner{
content:"mix me";
}
}

#mixer{
.outer > .inner;
}

Also mixins with variables are coming that will allow things like:

.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}

But I myself still don't think of Less as a complete CSS replacement and tactics that are good with CSS are still valid. Here's my thoughts:

enginechris.wordpress.com/...
gravatar Rob von N Wednesday, November 25, 2009
I've used the CssHandler on CodePlex with great success. Not as extensive / feature packed as <dot>less but I just wanted variable substitution.
This really should be in the CSS standard so CSS editors don't panic with the @var statements.
gravatar Erik van Brakel Thursday, November 26, 2009
@Rob von N: We're working on a Visual Studio package for .Less, which hopefully will include syntax highlighting, intellisense and such.

intellisense would be probably for mixins/variables at first, as that's what you'd like to be able to lookup easily.
gravatar Tangent Monday, June 28, 2010
@Erik van Brakel, I wonder if there is any progress with the add-in you are developing for .less. Thanks, I cannot wait to use the product.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!