The Dopefly Tech Blog

<< The Dopefly Tech Blog Main page

The Ease of Moving to LESS

posted under category: CSS on September 6, 2011 at 1:00 am by MrNate

You are not as far from using LESS CSS as you may think. What does it take to switch from plain CSS to LESS? It's 2 steps.

  1. Rename your .css file to a .less file
  2. Include less.js

That's it! From there, you can start to add some variables and nest your selectors, or get more advanced with mixins and color functions. Oh, and also my favorite thing in the world, the // single line comment!

There are a few cases where your stylesheet won't convert perfectly. I've noticed just a few. They are:

Too old to comment!
On Sep 7, 2011 at 1:00 AM Lola LB (lola, by way of his.com) said:
Is it really that simple? How well does this work with a .css that is 2500 lines?

On Sep 7, 2011 at 1:00 AM Nathan Strutz (www.dopefly.com) said:
Lola,
It is that simple. Even large files should be pretty fast, but you are adding the overhead of an extra javascript file and a LESS compile step. It's fast, but the larger the file, the more you will notice that the load time difference is not zero. In that case, I might recommend compiling before you deploy it to your site. Of course, always check it out for yourself, you could be pleasantly surprised.

On Sep 7, 2011 at 1:00 AM BradmanGA (brad, who breathes theascars.com) said:
For very large CSS I would just use the LESS compiler and have it generate the resultant CSS file. Then you have the regular CSS file but all of the goodies of LESS to work with. Example from the LESS site: lessc styles.less > styles.css
Too old to comment!