The Dopefly Tech Blog

« The Dopefly Tech Blog Main page

The Ease of Moving to LESS

posted under category: CSS on September 6, 2011 by Nathan

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:
  • 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

Nathan is a software developer at The Boeing Company in Charleston, SC. He is essentially a big programming nerd. Really, you could say that makes him a nerd among nerds. Aside from making software for the web, he plays with tech toys and likes to think about programming's big picture while speaking at conferences and generally impressing people with massive nerdiness and straight-faced sarcastic humor. Nathan got his programming start writing batch files in DOS. It should go without saying, but these thought and opinions have nothing to do with Boeing in any way.
This blog is also available as an RSS 2.0 feed. Click your heels together and click here to contact Nathan.