Get LESS from your CSS

In the past I have struggled with CSS. You know when you get to the point where you have a massive CSS file containing all the styles needed for your site, you have your colour scheme, you need to change a particular colour, you go through and have to find the 90 mentions of that colour to change them.

In steps compiling CSS scripts, I call them compiling scripts as they are files that you edit then compile into valid CSS. The two main systems that do this are LESS and SASS, SASS seems to be coming from a Ruby end, as the compiler used in compass. LESS runs in the Javascript domain and you can do compilation on the client side, with less.js or from the server side using node.js.

So what features does LESS offer that CSS doesn’t? (We might take a look at SASS as well)

Variables

LESS includes the ability to use variables in CSS. I think you can see where this is going…

/** LESS **/
@backgroud: #d2d2d2;

body {
  background: @background;
}

/** Compiles to CSS **/
body {
  background: #d2d2d2;
}

Variables can be used to reuse values such as colour, width and height throughout a LESS file. This means you get away from trawling through CSS trying to find every instance of a particular colour code. In itself this is a great start for reducing stylesheet maintenance time.

Nested Rules

As with most languages it is always better to be explicit rather than implicit, CSS is no difference so sometimes you will end up with super long selectors like header .nav ul li.active and so on. Nested rules are an attempt to avoid this situation by allowing you to nest CSS rules, like this…

header {
  .nav {
    font-size: 26px;
    font-weight: bold;
    ul {
      background: #d2d2d2;
      li.active {
        font-weight: bolder;
    }
  }
}

Mixins

Mixins are like functions for CSS, say you want to create a common set of styles to apply to an element. For instance, you have several styles that define the look of a button, maybe you have a border radius and a drop shadow. In CSS your code would reuse the border-radius and box-shadow styles quite a lot, why not just put this into a function?

.button-look (@radius: 5px; @shadow: 5px; @colour: #888;) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;

  -moz-box-shadow: @shadow @shadow @shadow @colour;
  -webkit-box-shadow: @shadow @shadow @shadow @colour;
  box-shadow: @shadow @shadow @shadow @colour;
}

.btn-success {
  .button-look;
  background: green;
}

.btn-fail {
  .button-look( 6px, 6px, red );
  background: red;
}

This reuse of code allows for some good flexibility when authoring style sheets for web applications and anywhere you have lots of repeating code snippets.

Functions and Operators

LESS offers some pretty cool functions, you can use these to make use of a common colour scheme easily. Say you have a navigation menu and you want the background colour to get lighter when you mouse over? Without LESS this involves manually setting the colour to a lighter variant, with LESS you might say this is fine as you can use variables to store the colours. Well how about just setting one variable and then using a function to set a CSS property to a lighter version?

@menu-bg: yellow;
nav {
  ul {
    li {
      background: @menu-bg;
      &:hover {
        background: lighten(@menu-bg, 20%);
      }
    }
  }
}

Using this you can just alter the variables you already have to produce the desired effect. You can find a reference on all the available functions here.

Conclusion

LESS and SASS are basically what we all wish CSS would of done from the beginning. It does however take CSS from being a language used to merely describe the layout and colour scheme of a document to being able to perform on the fly updates to stylesheets based on user interaction. With all things web relying on the interaction of the end user this can only be a good thing. The tools evolve to meet the needs of our users more effectively.

This post has been viewed 5753 times.

Leave a Reply

Your email address will not be published. Required fields are marked *