The Dopefly Tech Blog
<< The Dopefly Tech Blog Main page
Post A Comment!
The Ease of Moving to LESS
posted under category: CSS on September 6, 2011 at 7:21 pm 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.
- Rename your .css file to a .less file
- 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:
- Font sizes with a slash for a combined font-size / line-height, LESS tends to divide; the fix is to escape them, surround some or all of it with ~"tilde quotes"
- Missing semicolons and sloppy CSS won't compile in LESS; it won't validate either, so you should clean it up anyway
- IE-specific transformation filters and similar unofficial fringe CSS rules, escape the entire thing with the tilde quotes
On Sep 7, 2011 at 1:33 AM Lola LB (lola at the ever famous 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 7:52 AM Nathan Strutz (www.dopefly.com) said:
On Sep 7, 2011 at 2:01 PM BradmanGA (firstname.lastname@example.org or @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
Post A Comment!