Feb 1

Learn about LESS and why it rocks so hard

This is a post from Maria Nasioti, our design slayer and UX junkie. Maria joined BugSense fulltime October 2011 and she is responsible for our new dashboard design. She spent a great deal of time working on it and she will present us some of the techniques she used. The first post is about LESS, an alternative way to write to CSS or CSS for humans!

What is LESS?

LESS=The dynamic stylesheet language. LESS extends the standard CSS syntax. This means that you can create a LESS stylesheet using regular CSS, and just add LESS code to the stylesheet as and when you need it. Think of SASS, but simpler. LESS does all the basic stuff SASS can do. For more information go to : http://lesscss.org/

Why it kicks ass?

If you are a CSS ninja then it’s a 20 minutes process to understand and probably only one hour to be a master. This is a huge advantage of LESS.

The LESS compiler is written in JavaScript, so you can just include it in your page along with your LESS stylesheet. The compiler converts your LESS code into CSS when the browser loads the page. It’s advisable though to compile your LESS code to CSS and ship the CSS output on the production site.

LESS has everything that CSS is missing. There is one thing I hate about writing CSS: verbosity. LESS completely eliminates it by introducing the following concepts:

  • Variables. When you program you can set a constant variable that you can access throughout your program. You can do the same with LESS. Set a variable named @red, add your favorite hex red color and use it in your stylesheet. Wanna change the color a bit? Just change the @red value and smile.
  • Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Do you want DIVs to have radius and some shadow. Do you want to have a consistent style? Define your mixin and use it everywhere. More radius for everyone? Change the mixin radius value!
  • Nested rules. You can simply nest selectors inside other selectors. These can save you a lot of coding, and they make your code clearer. Bye bye long selectors!
  • Operators and functions, which let you create CSS properties mathematically.
  • Namespaces for grouping variables and mixins. This is very useful if you want to avoid naming clashes.

Lets Try it! The First Steps.

  • Download the less.js file from the LESS website http://lesscss.org/
  • Write your LESS stylesheet, in your favorite editor.
  • Include less.js and your LESS stylesheet file in the head section of your page.

 but there’s also a Google Code where you can get just the browser script.

Tips

  1. The LESS stylesheet is must be before the less.js
  2. The typical rel=”stylesheet” has become rel=”stylesheet/less”

Cool Features

The “watch” feature of less.js in the browser is cool. When you change the file, you save it and…IT’S READY!!! All you have to do is to put this code into your code:

<script type=”text/javascript” charset=”utf-8”> less.env = “development”; less.watch(); </script>

How it works: The browser displays the change immediately. This “autoloads” your styles whenever your LESS file changes (only localhost) and if you make a mistake on your code then your browser displays an error message on the top. Like in the following screenshot.


This makes it very fast and easy to understand and fix your code.

Problem with Chrome

So far so good, but if you use Google Chrome… ouch! Houston, we have a problem. Don’t worry it can be solved very very fast with some help from Python.

Chrome has an issue with loading local javascript files. This is a security “feature” in Chrome. For this reason we use Python to open a mini http server in port 8000.

Open the terminal and go to your project folder. For example I choose the folder: BugSense-Dashboard 

In your project path run this :

So simple. Now we are ready to go! Head to localhost:8000 from chrome and enjoy.

Tip

If you bored just try in Firefox or Safari. :)

Super Useful LESS Tools

There are already some great tools for working with less. 

  1. LESS.app for Mac. How does it works? it’s very simple, the only thing you have to do is to follow  the video- tutorial on the site. Now If you are a Windows user, you must read this useful article. (Cool & Useful: CodeKit automatically compiles Less and other cool stuff. Check it here: http://incident57.com/codekit/)
  2.  SimpLESS, is like LESSapp and It’s available for Mac, Linux and Windows. Very very cool.
  3. Crunch: a LESS/CSS Editor and Compiler. Crunch is a very easy to use with very nice look and feel. You write your less file in crunch editor and when you save it, it automatically builds the css file in the path you’ve choosen. Crunch App is very Beautiful. I love the style and how user friendly it is. And of course if you make an error crunch tells you where and why. The most important in Crunch is: It is available for Mac, Linux and Windows. You must try it!

Useful

  1. Write LESS with Perkins HTML5 / CSS3 Framework.  Perkins is an HTML5 / CSS3 framework like the Boilerplate framework. Perkins allows you to take more advantage and allow you not to make DRY (Don’t Repeat Yourself) and it is based in LESS.js. Perkins includes LESS stylesheets for common designing tasks like border-radius, navigation, gradients etc. The core Perkins framework includes support for grid layout.
  2. Preboot.less is a pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

Protip, minify & compile with Node.js

Maybe you would also like to minify or combine your LESS before deploying. An easy way to do that is to use the LESS compiler for Node.js. We have created a command line node tool that reads all LESS files, compiles them to css and then minifies them. We have added this command line as precommit hook to mercurial so everytime we commit we have a freshly baked, minified css file that we serve in production.

Misc

http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/

http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/

If you have any questions, ideas, additions or just want to say hi, feel free to tweet me Maria Nasioti

-Maria