Thomas Sampson

Working with LESS

Leave a comment

What?

After having around 20 minutes exposure to LESS (CSS pre-processor) I’ve picked up the following quick tips:

How it works

LESS is a language/syntax for writing CSS which grants you more freedom and less repetition when defining and organising CSS styles with features such as variables, imports and loops. To be of any use, LESS files are translated into vanilla CSS for consumption in the browser (this can be done client-side at runtime, or baked out offline).

Writing LESS

Looks fairly simple, the LESS file I worked with (albeit for 5 minutes) bared a close resemblance to regular CSS, with some syntactic sugar sprinked here and there for good measure. Full specification can be found here:

Using LESS

Although it appears that some nifty javascript can be used to translate your LESS code to CSS at runtime (probably preferable to reduce turnaround times during development), in my scenario I needed to bake out minified css files offline. This can be achieved as follows:

  1. Install Node.JS
  2. Open a Node.JS command shell
  3. Install the less nodejs package:
    npm install -g less
  4. Compile your LESS file, redirecting output to destination .css file:
    lessc styles.less -x > styles.css
  5. The -x flag can be removed if you do not require the CSS output to be minified
Advertisements

Author: tomtech999

I have recently graduated with a 1st class degree in MComp Games Software Development at Sheffield Hallam University, focusing primarily on application development in C++, with experience in graphics programming, scripting languages, DVCS/VCS and web technology. In my spare time I enjoy Drumming, Reading and Snowboarding!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s