Less is more


Less is more! And this was newer so true as with CSS.

CSS, in its core, is simple and “user-friendly” but I have not worked on a project (including my own) where CSS did not present a challenge later.  However you organize your files and classes you end up with spaghetti-code.

Not recently ago I stumbled upon SASS and Less CSS. Both looked promising so I gave both a little test run. After doing some basic tests with both I opted for Less CSS because it just made a bit more sense for me, and it uses Ruby (I love Ruby).

So what is so special about Less CSS? Well my top three list is:

  1. Variables
  2. Operators
  3. Importing

There are many more but those stand out. This is the time when we have to say that all of this can be achieved by using standard CSS functionality, just not as pretty.

So let’s get started. The first thing that I find really helpful are variables. The power of variables comes to bare when you find yourself using the same color in multiple classes. This is not a great problem but if you want to edit that color you are in a little overhead. What you can do now is to define a variable and use it as a constant to distribute the same value to multiple classes. This would then look something like the following:

@dark-brown: #CC7732;
@light-brown: #FFC76D;

.menu{
  background-color: @dark-brown;
  color: @light-brown;
}

This looks nice and has massive applications to make your CSS files cleaner.

If we take the concept of variables and combine it with the concept of operators we discover quite an interesting possibility. The obvious conclusion would be that you can do nice inline operations on variables. So that the above example would look like:

@dark-brown: #CC7732;

.menu{
  background-color: @dark-brown;
  color: @dark-brown - #111;
}

You can apply any arithmetic operations to color and dimensions(px,em, and all the other good stuff). So that you can do some really nice things, like:

@dark-brown: #CC7732;
@default-margin: 6px;

.classA{
  color: @dark-brown + #222;
  margin-top: @default-margin * 2;
  padding-bottom: @default-margin / 2;
}

One more thing, before we talk about importing are mixins. The sample at less CSS is quite uninspiring, but if combined with variables then it gets interesting. You could do something like:

.colors(@base-color: #CC7732){
  background-color: @base-color;
  color: @base-color + #111;
}

.classA{
  .colors;
  /* ... */
}

.classB{
  .colors(#111);
  /* ... */
}

And this is some cool shit there.

The thing that almost made me wet my pens was the ability to import everything from shared files. So that if you want to organize your CSS files you can keep all common things in a separate file. The importing is pure Ruby standard and therefore straightforward.

@import "colors"
@import "base.css"

When importing less files the .less extension can be omitted. Quite a nice and useful feature.

So this are some of the nice features that I beg you to explore and use. But how do you get this whole thing to work? Well if you are not afraid from the command prompt this is quite easy.

Provided that you have installed Ruby and installed the required less gem you just need to type:

lessc main.less main.css

There is a watch option that will constantly watch your .less files and transform them to .css files on the fly, for when you have to tinker with them 🙂

All in all this post is not expressing 20% of the impact that less CSS had on me. So do check out their homepage and use it.

And another thing. If you do not have Ruby installed this could actually be worth it. And after you start down the Ruby hole, there is no telling where you might end up.

Advertisements

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