Getting around CSS with Sass and Less

I was reluctant to tackle this project because CSS is undoubtedly my least favorite of the 3 core web languages: JavaScript, CSS, HTML. To me it’s been a necessary evil, or a time suck on days I want to procrastinate while maintaining the illusion of productivity.

There are three things I hate about CSS:

1. While being relatively easy to write, CSS files quickly become unmanageable in terms of line count and variable names
2. It’s a necessary evil, emphasis on necessary. CSS is inevitable
3. I’m bad at writing CSS quickly and haven’t been getting any better. CSS experience doesn't seem to build upon itself.
   • Unfortunately, I’ve been the sort of coder who must spend hours Googling the CSS code to create any formatting beyond font-styling, coloring and floats.

Then, I saw a tweet earlier this week that alerted me to CSS language extensions, namely SASS and LESS. From what I’ve read, Sass is the most popular, while Less is lightweight and ideal for smaller projects.

While Sass and Less seem to take some of the pain out of formatting your apps, using one does not mean it can replace all your CSS. Sass and Less share a lot of the same features. But SASS is based on Ruby, while LESS uses JavaScript.

I have spent zero time working with either Sass or Less so there’s not much I can offer in terms of feedback based on my experience. My goal for this blog post was to offer that feedback, but my laptop battery stopped charging yesterday.

I quickly wrote this blog in case my replacement battery does not arrive by tomorrow.

But of course, several developers have offered their insights on the differences. Check out this gist, by Chris Eppstein, that provides a direct comparison between the two.