Create Faster Fluid Layouts With LESS

Every new web technology or school of thought comes with a learning curve, but responsive web design is based in familiar territory – CSS. Luckily for you there’s some new kids in town with some new toys to help you out. CSS preprocessors such as LESS and SASS are taking a front seat and showing that there is room for a more dynamic stylesheet language. Variables, mixins and functions are now available to Paul Mist and, as the web becomes a more fluid and device-agnostic place, he couldn’t be in better company. In this tutorial he's going to show you some of the basics of the LESS dynamic stylesheet language and finally, how you can harness some of its greater potential into speeding up the creation of fluid layouts.

To get ready, Paul Mist has made up a nice simple HTML page with a standard CSS stylesheet to accompany it. First you need to include the LESS JavaScript file in your HTML page. You’ll also need to update the link to your stylesheet to show that you’ll now be using a .less file. Now, clearly that’s a dead link. You need to create your styles.less file. To do this simply duplicate and rename your styles.css file accordingly. Hey presto, your page should open and render exactly the same as it did before. Let’s get stuck into making your code a little more interesting with some LESS additions. First up, and possibly the most important of LESS’s assets, are mixins.