DRYer CSS with Less

DRYer CSS with Less written by: Lee Richmond posted on: 22 February 2010

One thing I have disliked for a while about web development is CSS (Cascading Style Sheets). We all love to have web apps that look pretty but when it comes to writing CSS you tend to find that you end up repeating values and this is what I dislike about it.

There are various solutions to deal with this problem such as Sass but in most cases this means taking the time to get used to a new syntax. Luckily I found this Less, Less is a way of DRYing up your CSS using Variables and Mixins without taking the extra time to learn a whole new syntax.

Less is easy to install assuming you have RubyGems installed simply type:

12	sudo gem install less

then in your public/stylesheets directory create a file called style.less (don't worry about changing it in your layout as we still use style.css for this.) if you have an exsiting style sheet you can simply cut and paste the contents of this into your .less file and then from there you can start simplifying your CSS.

Nesting

Nesting with Less couldn't be simpler in your old CSS you may have something along the lines of:


body{
  font-family: arial;
  font-size: 13px;
  color: #000000;
}
body #header{
  width: 960px;
  height: 100px;
  margin: 0 auto 0 auto;
}
body #header .navigation{
  width: 400px;
  height: 50px;
  float: left;
}

But if we want to write this using Less we do this:


body{
  font-family: arial;
  font-size: 13px;
  color: #00000;
  #header{
     width: 960px;
     height: 100px;
     margin: 0 auto 0 auto;
    .navigation{
       width: 400px;
       height: 50px;
       float: left;
     }
  }
}

so as you can see rather this has saved us having to repeat ourselves just by allowing us to nested one within the other.

Variables

Once again these help to tidy up your CSS by allowing you to declare elements such as colors etc. at the top of the file like so:


@main_color: #CC0000;
@header_margins: 0 0 0 10px;

h1{
  color: @main_color;
  margin: @header_margins;
}

as you can see by declaring anything we will be using over and over again at the top of the file we save ourselves the hassle of having to remember any colour hex's we use, and make our code much cleaner, this also saves any problems with for instance if you need to change your colour scheme, you only have to declare your colours once and its done.

Mixins

Say for instance you use rounded corners on various elements in your layout, mixins can be extremely helpful in making sure we not only cut down on the amount of code we have to write but keeping things consistent for example:


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

.article{
  .rounded_corners;
}

.submit_button{
  .rounded_corners(10px);
}

by doing this we have kept all the values for the rounded corners in one mixin and if we decide we want a larger radius on certain elements (in this case a submit button) we can do that without having to write out the whole thing again.

Finally to convert your .less file to a working .css file to be used on your application simply type the following in to the command line:

12	lessc public/stylesheets/style.less

the good thing about this is that if you have missed anything, for instance you have missed a closing } it will tell you.

I have only covered the basics of what you can do with Less hear but make sure you head over to http://lesscss.org and give it a try for yourself.

*UPDATE* For Textmate users there is a bundle you can install to make life even easier for yourselves http://github.com/appden/less.tmbundle

Stealthy Gecko