Get more from LESS

photodune-code

I’m back! It’s a new year, so the site has been tidied up & redesigned, so it should feel more 2013 than early 2011! Hope you enjoy the redesign.

Everything is getting quicker on the Internet. The speed of which information comes up and down, the speed of communication between social networks and – more importantly to me – the speed in which development is done. Over the past few years, there have been an influx of inventive, useful and game-changing technologies introduced into the web development world and one of these I want to talk about today is LESS.

Straight from the wiki – “LESS is a dynamic stylesheet language designed by Alexis Sellier.” The idea being that developers who have used CSS for years are ready to inject their language with speed, functionality and flair.

The core features of LESS are:

  • A syntax which compiles (either server or client-side) into pure CSS
  • Includes mechanisms new to CSS, such as variables, reusable methods.
  • Nested syntax allowing for tidier code.

LESS is brilliant, and has definitely changed the way I work day-to-day – and it has certainly had an impact in digital houses across London. As with all brilliant tech implementations, however, one solution isn’t necessarily enough for every project. That’s why there have been a bunch of additions, add-ons and libraries to extend the usefulness of LESS. Here are a few of my favourites:

LESSHat – A bunch of smart LESS mixins.

lesshat

LESS allows for mixins; reuseable snippets of code to make less work for the more complex, cross-browser CSS rules such as animation, gradients and box-shadows. Instead of reinventing the wheel every time you start a new .less, LESSHat have provided a universal, cross-browser tested and configureable plethora of mixins to use. The documentation is the real winner for me for this extension as it clearly documents what you have access to when you implement this library. The other great thing is that they’re still adding to the list, meaning more features incoming like cross-browser keyframe method support.

Easy Media Query Shortcodes

mediaquerie

This is more of a tutorial than a library but it demonstrates how you can use simple LESS media query methods to define variables to switch between media query type. By defining variables such as @desktop, @mobile etc, you can then use these throughout your LESS file to give different platforms different stylesheet rules.

Retina JS

retinajs

Ignoring the “JS” part of this project on GitHub, this provides a very useful LESS helper to rendering high-resolution image variants for retina resolution platforms like iPad and iPhone. Using this in tandem with the above two helper-packages, you could very easily and quickly make a responsive website with universal and cross-platform support.

CodeKit – THE Mac App For Web Developers

codekit

With all these libraries and extensions to LESS, you’re going to need a way to manage and compile your sites. I don’t tend to use server-side compilation as it isn’t always provided by a client/customer’s server situation, so I just compile into CSS using CodeKit.

CodeKit is a fantastic (paid, Mac-only, sorry Windows users!) piece of software, allowing you to set up projects to be listened to for any LESS compilation on file-save. This means that you can work directly on your LESS file, save it and it will compile out to a .CSS file (minified optionally). The fun doesn’t stop there though as it also provides JS & Coffeescript compilation and minification as well as image optimisation. It is $25, but if you work often with LESS files, the time saved is definitely worth the cost of the application. UI-wise, it is beautifully simple to use and keeps itself to itself as you develop, asking little but giving a lot.

More CSS

morecss

All this time saved might not be your thing. If so, More CSS was released to allow you to write human-readable CSS, which is then compiled into usable code. This one is for the more literature-based developers. Note, the latest version was released April 1st 2012. *wink wink*

 

Do you know of any that I’ve missed, or have any brilliant LESS extensions that you can’t live without? Leave a comment and let me know!

Andy Girvan

Andy is a web and mobile developer who freelances for some of the worlds biggest companies on a variety of projects.

3 Comments

  1. Kyle   •  

    Can Codekit work with things like LESSHat? I’ve been considering the switch to SASS because it seems so much more feature rich and constantly evolving.

    • Andy   •     Author

      I’ve used LESSHat in a few projects as well as CodeKit and haven’t run into any issues yet – so to my knowledge they work well together :)

  2. three   •  

    Thankfulness to my father who shared with me about this blog, this blog is in fact awesome.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>