The new Handcraft is here!

Write less CSS with Less CSS

Less CSS really does what its title claims. It’s an elegant approach that adds all the syntactic sugar you ever wanted to vanilla CSS, such as variables, nested rules and declaration templates. And it starts out by being 100% compatible with your original CSS files. So what are you waiting for? The only way is up.

Less CSS.

Less CSS.

Less is more

What’s so great about Less is that it doesn’t require you to master a new language, something that can’t be said about Less’ excellent rival Sass. So in theory, existing .css files can be renamed to .less in order to add variables or nested rules.

Variables in CSS.

Variables in CSS.

However, there’s more to it. Browsers don’t understand the less syntax, so your .less files must be converted to plain CSS. This conversion used to require a mechanism on the server to accomplish this, and known server implementations are available for Ruby and for .Net.

LessJS

The server requirement will soon be made redundant however, as Alexis, the creator of Less, is working on LessJS – a Less parser in Javascript. This allows .less files to be parsed and converted to CSS rules by the browser, making Less instantly available to any platform.

Less support in Quplo

We truly believe that Less is here to stay, as it smoothens out another dent not only in the final stages of website production, but as early as the HTML prototyping stage. Therefore, as of today, we’ve added a new page type called “less” to all Quplo prototypes. The implementation is based on .less, so we’d like to thank its team and Alexis Sellier for creating Less in the first place. Using it in Quplo is as simple as this:

Less support in Quplo.

Less support in Quplo.

Less is less

Googling for the Less framework might cause confusion. Next to Less CSS is the Less Framework by Joni Korpi which also has to do with CSS but is a mechanism for creating a web-based grid of columns. It’s similar to the well known 960 Grid System, although Less Framework’s approach adds graceful degradation for smaller screen resolutions such as those found on the iPad or iPhone.

We consider the 960 Grid System and Less Framework to be of great value to all Quplo users, so it’s a topic that we might spend more airtime on in a future post.

2 Comments

Ping RSS

  • The thing is, Less CSS is much less of a solution that SASS, because it doesn’t have something similar to Compass CSS.

    Compass CSS is a set of best-practice reusable ‘components’ for lack of a better word on top of the SASS CSS ‘preprocessor’.

    With these two packages working together you both get improved CSS syntax, and a collection of well-tested solutions for most layout needs. AFAIK Less doesn’t have the second part, and that part is very useful for lesser experienced CSS authors such as myself…

    by Peter Hansson • Oct 1st 2010 • 16:10

  • Check out flawless css:
    https://github.com/DominikGuzei/flawless.css/

    It’s a framework that uses less.

    by ER • Nov 8th 2010 • 15:11

  • Leave a reply