It’s time to add Less/SASS to your workflow

Getting started on something new can be challenging…especially when there’s competing technologies that do similar things…it makes it tough to choose which one to give our precious time to learn. One of the hot new trends in web design is CSS pre-processed languages and there’s two big ones vying for your attention. Less and SASS are ways of writing CSS with a syntax that allows you to use features not yet available with Cascading Style Sheets (CSS)…features like variables, nesting, conditionals and more.

Why use pre-processed CSS at all?

It’s hard enough becoming proficient with CSS, HTML, JavaScript and jQuery, so why would you want to submit yourself to learning an additonal language? Especially since you can do the same thing with CSS. Learning a new technology comes down to wether or not it will make you better, faster or more efficient. One way both languages do this is by introducing variables into CSS.

When you build a large website, there’s usually a palette of colors you’re using throughout the site. You might be using a color for your article headlines that you also want to use on your links on the bottom navigation. Doing that with CSS is pretty easy.

article h2 { color: #3D91AD; }
footer nav a { color: #3D91AD; }

That works well, but what if you used that same color in 20 or 30 selectors, or in gradients with a bunch of different browser prefixes. Both SASS and LESS allow you to create variables which makes global changes on elements a breeze. It looks like this in Less

@myColor: #3D91AD;
article h3 { color: @myColor; }
footer nav a { color: @myColor; }

And like this in SASS

$myColor: #3D91AD;
article h3 { color: $myColor; }
footer nav a { color: $myColor; }

Results of SASS and LESS code

Looks pretty much like CSS…right? Both LESS and SASS let you use the regular CSS code you already know and it will process it correctly. So you really don’t have to learn a whole new way of doing things. Even if the only thing you get out of them is the ability to use variables they will save you a lot of time…and that’s the type of technology you need you investigate.

Using a Compiler App

Unfortunately, when you use these languages, you need to compile the SASS and LESS code into CSS. That can be done in a variety of ways. Less, for example can be downloaded as a javascript file that can be added to the project, or as a command line tool for either your local machine or your server. SASS’ installation is also a command-line install. Arggh!. They try to make things easier by letting you define watched folders that get automatically processed, but it’s still not a user friendly experience. Not for your average designer, which is why most people who use CSS (graphic designers) have never tried it.

Thankfully, there are some compiler applications that will take care of processing files for you and update things visually. My favorite compiler application is CodeKit . Codekit is a visual tool for compiling pre-processed languages. It handles a lot more than LESS and SASS. It lets you process Haml, CoffeeScript and even JavaScript.

The awesome CodeKit compiler

You can also have CodeKit minify all of your files, not just your CSS…that means that it can spit out a different version of your code without comments, tabs or extra spaces and modified variable names so that are as shorter than your originals. That will make your files a lot smaller, which is something you should be doing anyways.

If you use frameworks like BootStrap or jQuery Mobile, you can import them into your projects through CodeKit from a central location. When a new version of jQuery comes out, you can simply replace one copy and all of your projects will auto-update with the latest copy.

On a PC or Linux machines, things are a bit less rosy, there is a nice Less compiler called Simple.less which helps, but it’s not as featurefull as CodeKit.

Get Started

There is so much more that you can do with Less and SASS, but if you’ve been on the fence about them, it’s time to give it a shot, start with variables, it’s simple enough and will make your life immediately easier. Even if you’re into command line tools, take a look at something like CodeKit or SimpleLess.

Which one should I use?

They’re both pretty good, especially if you’re getting started (although several people are passionate about each). If you want some good reviews, check out Chris Coyier article on SASS vs Less (he likes SASS better). Also take a look at this article from NetTuts, which shows you some of the differences in the syntax.

Less has a bit of an edge for me since I’m currently digging into Twitter’s Bootstrap Framework, which makes it a breeze to scaffold and build websites quickly…and it is written in Less. SASS takes the edge if you’re working with Ruby on Rails projects since it was written in Ruby, but ultimately it doesn’t really matter. What matters is that they’re both tools that will make you more efficient…and that’s always worth an investment in time. Pick one and wedge it into the workflow for your next project. It will take you a bit longer to finish, but will also change the way you code for the better.

Leave a Reply