Me Love You Runtime Code Monkey!

Dot Less

I recently attended the Microsoft Techdays. They’ve really got it down with these things. This time it was in a cinema (Vue) in Fulham Broadway for developers and in Shepherds Bush for IT professionals. In the evening they had fringe events. On Wednesday evening I decided to go to the open source .net developer event. I’ll try and write about some of these, but one which instantly stood out to me was Dylan Beattie’s quick talk on Dot-Less.

Dot-Less is an open source port over from Ruby’s Less library. What it does is allows developers to do some impressive things with CSS. It’s a fairly obvious concept. It doesn’t change the way CSS works, it allows a developer to write some interesting things easier.

For example. If you have a brand and they have a colour used across the CSS document, you will usually have to write font-color:#CC0000;, then background-color:#CC0000; etc. for anything which needs it. Dot-Less allows the developer to define these at the top like a variable. Like: @brand_color: #CC0000; You can then do the rest of your CSS as: font-color:@brand_color;, then background-color:@brand_color;. Excellent! So when the client inevitably changes thei mind, instead of risking find and replace, you replace one value and BANG, the colours are changed.

It gets better. You can even group styles which you might reuse. e.g.

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

This is something developers will grow to hate over the next few years as CSS3 waits for browsers to catch up. With Dot-Less, you then can add this style group to another style e.g.

#header {
  .rounded_corners;
}

Lovely, and when the client changes their mind about that drop shadow, you change it in one place. Something I liked, was that you can perform mathematical operations on your CSS. e.g.

#yourid {
  color: #006600 * 3; /* will equal #090 */
  border-left: #006600;
  border-right: #006600;
}

This then changes the colour slightly and you get sme lovely effects. Ok, a little bit of a dev toy (I can’t see a designer agreeing to that) but it is a nice way to play about with CSS. There are other little tricks like nested rules etc. But best visit: http://www.dotlesscss.com/ for the full low down. And because all of this gets rendered on the server side. It will just work in all browsers as normal CSS but without the mess usually involved. Go away and have a go!

As he ended off, Dylan said “5 years ago, .net developers would have to borrow and steal anything open source, now it is very different”. I remember those times. How Microsoft has changed, and for the better, making .net a fantastic environment for programmers to work in with some very powerful libraries now available. I spend a lot of my day on CodePlex looking at the new libraries. It almost brings a tear to my eye!