use Less to reduce CSS clutter!

Sign in to queue

Description

Reading a post by Phil Haack, I learned about a neat technology called LESS that helps reduce the amount of CSS and duplicated code you have to create.  It was originally a Ruby Gem but now has a .Net port called .Less which can be found at www.dotlesscss.com

It lets you do some amazing things like global changes and even operations!

Variable:

@brand_color: #4D926F;
 
#header {
  color: @brand_color;
}
 
h2 {
  color: @brand_color;
}

Operation:

@the-border: 1px;
@base-color: #111;
 
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
 
#footer { 
  color: (@base-color + #111) * 1.5; 
}

Tags:

ASP.NET, CSS, Web, C4FNews

The Discussion

  • User profile image
    Alan

    This is something the W3C should have added to the CSS spec years ago. At least the ability to define a colour at the top of your CSS file, and then use it again later on. That would make life much easier.

    Truth is, it's pretty easy to get ASP.NET to handle your CSS files and do this yourself. You can do some basic parsing of the CSS file and emit valid CSS based on your settings.

    Thanks for the info.

  • User profile image
    RGripper

    Their site was moved to www.dotlesscss.org.

    I also think it was quite sane to keep CSS lean and occasionally use tools like this.

Add Your 2 Cents