Keeping CSS Files DRY with .less

 

It 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.

Visual Studio Color Scheme

 

I got a question asking if the color scheme I use in my example code on the blog is an actual Visual Studio color scheme as well and if I could share it. So to answer the first question, yes it is the color scheme I use in Visual Studio, and nah I don’t think I want to share it, err … of course I do

The color scheme is slightly changed from the original which was “Ruby Blue” (the link seems to be broken now) this was also featured in Scott Hanselmans blog but then I already had it For those that do not want to read the whole post, here is the download already: Visual Studio Color Scheme.

First let me show two nice screenshots of the Visual Studio color scheme, the first one is in Visual Studio 2008 and the second one is in Visual Studio 2010. Click on the images for a full size (1900×1200).

Visual Studio Color Scheme in Visual Studio 2008

Visual Studio Color Scheme in Visual Studio 2010

I really like what this color scheme is doing for my eyes, it is really much more relaxing for me to work in Visual Studio now. When in Visual Studio 2010 it even gets better, there Microsoft even changed their IDE to match my preferences and made the side bars in a similar relaxing color, Yay Microsoft.

There is one issue with this color scheme in combination with ReSharper and that is that ReSharper uses some weird highlighting for to-do’s and that becomes unreadable in this color scheme.

So in order to make this readable again I had to turn this off in ReSharper, the end result is as follows.

Much better won’t you say? Now all you have to do is open the options window of ReSharper and scroll all the way down to To-do Items and select the “Not Implemented” item in the Patterns box and remove it. You may want to open it in edit mode to copy the details, but that is up to you. The other items will give you the same unreadable results so you might want to remove them as well.

ReSharper Options Window

In the download you will find the Monaco font that is used by the scheme and an export of my Visual Studio setting (AdaptedRubyBlueSchema.vssettings). Besides that I also included some ReSharper user templates (ReSharper_UserTemplates.xml).

I like to highlight one of those user templates; one that I think every C# developer should have and that is my Lambla user template. TYpe “x+Tab” and you get “x => x” where x is selected so that you can immediately change the name of x into something more descriptive (will change both ends). When you are done changing the name press “enter” then “.” and intellisense pops up telling you what members x has. How cool is that?

Oh finally I would like to share how I get my code examples in my blog, for that I use a Visual Studio plug-in called “Copy Source As Html” which takes all the formatting and copies it to correct formatted Html, similar as it looks like in your Visual Studio instance.

Tags: Esoterica

Are Coders Nice?

  A few months ago, the team my husband works on was hiring a new developer, and I overheard my husband talking to a friend he was considering recommending for the position. I surprised myself by my gut reaction which was,...

Tags: Blogs, career

Work Flow Optimizations for Short Development Cycle Team

  One of the responsibilities of being a technical manager is to optimize work flows and create self sustaining systems for the teams that you manage. One of my teams operates on an extremely short development cycle. They begin coding in...

Tags: Blogs, career, management, workflow