Our Thinking

CSS Preprocessors

Posted by Chelsea Odell on Mar 25, 2013 10:30:19 AM

Have you ever had to change the colors in a website? How about update the font style or size? If you’re still working without the benefit of a CSS preprocessor, chances are you did a search through all your CSS files, hopefully replacing all the instances where the color or font existed (only to miss at least one instance). Haven’t you always wished there was a better way? Some way to declare your website’s colors and fonts so that you’d only have to update one place in one file? Wish no longer. This is the type of problem CSS preprocessors solve, along with much more besides.

What’s a CSS Preprocessor?

As you might guess from the name, a CSS preprocessor takes a file written in some CSS preprocessing language, processes it, and compiles it into a regular CSS file you can serve up as usual. But they can do so much more than that! CSS preprocessors extend CSS with additional behaviours that greatly increase the effectiveness of your CSS coding.

Why Should You Use a CSS Preprocessor?

CSS preprocessors add functionality to CSS that help save time and effort. The three additions I’ve found the most valuable to date are: variables, mixins, and the ability to import.

Variables

Remember the example above of having to search through CSS files to update a color? With a CSS preprocessor you could declare some variables like so:

@maincolor: #eeeeee;
@secondarycolor: #ffffff;

And use them like so:

h1{ color: @maincolor; }
h2 {color: @secondarycolor; }
a {color: @maincolor;}

And should you ever need to update the main color of your site, you need only update one variable and recompile, and the change will cascade throughout your CSS files. Variables help keep you DRY (http://en.wikipedia.org/wiki/Don%27t_repeat_yourself).

Mixins

Mixins are kind of like methods for CSS. They let you re-use CSS, properties or selectors, as well as provide arguments. I find them especially useful for handling vendor prefixes.

Assuming you are attempting to support as many browsers as possible (of course you are!) you have probably written something like the below:

.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}

With a preprocessor, you can create a mixin for border-radius:

.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

And then use it throughout your files thus:

.rounded-corners {
.border-radius(10px);
}

Now you only have to look up the syntax the first time! Time saved.

Import

You wouldn’t put all your code in one class (would you?) and now you don’t have to put all your CSS in one file. Using a preprocessor, you can split your CSS across different files (buttons.x, layout.x, etc.) and import them into a main style sheet. The preprocessor will compile the main style sheet and output all your styles as one style sheet. This allows you to serve up only one CSS file in production, but keep your code organized and easy to maintain.

And those behaviors are only the tip of the iceberg! Most preprocessors also provide support for: nesting, extending, operations and math.

Which CSS Preprocessor Should You Use?

As with most software decisions, the answer to this question is: it depends. The two most popular CSS preprocessors at the moment are SASS (http://sass-lang.com/) and LESS (http://lesscss.org/). Both are almost semantically equivalent, so the decision to use one or the other really comes down to your own personal workflow and/or environment.

What am I Using?

I used .less (pronounced dot-less [http://www.dotlesscss.org/]) to great success on a recent project. I went that route because I wanted something that would integrate into my day-to-day .Net workflow, and you can use .less within Visual Studio 2008 to compile your LESS files every time a project is built. I was recently pointed in the direction of Work Bench (http://www.mindscapehq.com/products/web-workbench), which brings support for LESS and SASS to Visual Studio 2010. Chances are I’ll be choosing SASS for any future projects. I’ve already jumped on board the SASS train for my personal projects due in no small part to the advice of folks smarter than me (Chris Coyier http://css-tricks.com/sass-vs-less), but also because of my new found love for Hammer for MAC (http://hammerformac.com/) and Andy Clarke’s newest responsive project Rock Hammer (http://stuffandnonsense.co.uk/blog/about/rock-hammer-a-curated-responsive-project-library) .

Summary

CSS Preprocessors help to make CSS what it should be: organized, maintainable and DRY, and will make you a more efficient front-end developer. No matter which preprocessor you choose, you’re going to be making your life easier and working smarter. So, pick one, and code something beautiful!

Resources

 

Topics: Design, Usability

Our Thinking - The Online Blog is a source for insights, resources, best practices, and other useful content from our multi-disciplinary team of Onliners.

Subscribe to Blog Updates