LESS CSS

CSS is probably one of the biggest advancements in web development since HTML itself and it allows us to do all kinds of cool things but as a developer it’s missing a few things. Over the past few years people have been busy writing CSS preprocessors to speed up development time and add some of those missing features to CSS. I’m not going to go on about all the different options to choose from I’m going to talk about one. LESS CSS.

I’ve been keeping an eye on LESS since 2010 but never really got stuck in, it was only recently that when working with Twitter Bootstrap that I started looking deeper into it. In their own words:

LESS extends CSS with dynamic behavior such as variables, mixing, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

All sounds pretty exciting doesn’t it? What does it all mean?

So technically speaking LESS is a new syntax, it very closely resembles standard CSS and a LESS file can actually contain just CSS (but that would be a little pointless). What it does is give you a number of cool things you can do in addition to normal CSS. It is important to point out at this point that you can’t just replace your CSS files with LESS files (*.less). LESS needs to be compiled into CSS. Whilst you can do this a number of ways such as with a client-side JS or on the server-side with Node.js I personally compile it myself using a great little app called CodeKit. It watches your LESS files and creates a lovely minified and compressed CSS file for you every time you save your LESS files.

Imports

Remember how imports in CSS are bad? Well in LESS they are good. It gives you a really nice way to organise your CSS into multiple files for development yet still compiling down to one single style sheet.

/* This is a CSS-Style Comment, when you compile me I will stick around in the outputted file */

// I'm also a comment but I won't show up in your compiled CSS
@import "header.less";
@import "colours.less";
@import "type.less";

So we call the above file style.less and stick inside a folder called less in our project (my_project/less/style.less) we will then create the other files in the same folder. Now when you add the project to CodeKit it’s clever. It will see your style.less and see you importing other files and will only compile one CSS file for you. By default it will output to my_project/css/style.css assuming that you name your master LESS file style.less. You can change where and how your files are compiled in CodeKits preferences, for the purpose of this they are set to defaults).

So any changes you make to any of the files will trigger CodeKit to recompile your CSS file. Let’s go into some detail.

Variables

Variables are super useful. As with PHP they allow you to create and define a value in one place and then re-use it through out the style sheets. If you need to make a change you only have one place to do it.

@black: #333333;
@grey: #666666;

#header {
    color: @black;
}

h2 {
    color: @grey;
}

The above LESS would compile nicely into:

#header {
color: #333333;
}

h2 {
color: #666666;
}

Pretty easy isn’t it? If you wanted to change the value of your black you do it one place and then every time it is referenced it would automatically update on compile.

Mixins

Mixins are like variables but for entire blocks of style. A mixin allows you to embed the properties of a class into another class simply by including the class name as one of it’s properties. Mixins can also take arguments to make them behave more like a function.

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

The above would compile as:

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Mixins are super useful and can speed up your development time hugely. If you want even more of a head start check out this collection of 10 LESS CSS Examples your should steal.

Nested Rules

One thing I really hate in CSS is inheritance. It just seems like a real pain in the ass whenever I want to specify some particularly deep inheritance. Fortunately LESS makes this so much easier! You can simply nest selectors inside other selectors!

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Magically compiles to give us:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Functions and Operations

LESS starts to get even more useful here.

Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.

All sounds pretty useful but what does it mean? Simply put it is taking CSS and slamming in some Javascript style syntax for altering values.

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

As if by magic becomes:

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

Conclusion

I have only touched on some of the things you can do with LESS and have used their very own code examples so hopefully as you move on with LESS it all slots together. It is already speeding up my development and, as a PHP developer, makes working with CSS feel more natural.

Head over to the LESS CSS website and start learning today!

 Tagged with: ,

Leave a Reply

Mojowill Avatar

Who the Hell am I?

I'm Will, a full time web developer, geek and musician. I develop using PHP and MySQL and spend most of my time working with WordPress. When I'm not buried in code I'm gaming, cooking or writing and recording music in my studio. I like sci-fi, pancakes and coffee and am totally prepared for the zombie apocalypse...

Stalk me on these other sites...

Why not be super creepy and check me out on all these other sites, I think they call it social media?