LearnHow to Choose the Right CSS Preprocessor

You’ve probably heard about CSS preprocessors by now, but haven’t quite plucked up the courage to try one because of the learning curve, or maybe because “preprocessor” just plain sounds intimidating. So let’s put those uncertainties at ease and go over what preprocessors are, how they work, and which one you might choose. In this article, we’ll discuss the three most popular ones: Sass, LESS and Stylus.

Check out our other CSS courses at Treehouse.

Preprocessors compile the CSS code we write in a processed language to the pure CSS syntax we’re all used to. If you’ve recently considered using a CSS preprocessor, there’s no better time to dive in with all the options and helpful tools available.

Until recently, there was a lot of resistance from developers who argued that preprocessors steered too far from pure CSS, added more layers of complexity and that “If its not broken, don’t fix it.” But lately, many have realized just how powerful preprocessors can make our CSS.

Why We Should be Using CSS Preprocessors

There are various reasons why CSS preprocessors can be a valuable tool in our development process. First, they don’t break browser compatibility; LESS, Sass and Stylus are all valid CSS and vice versa. Another advantage is preprocessors make our CSS DRY (Don’t Repeat Yourself) by allowing us to create variables from reusable CSS properties, which makes our code more modular and scalable, so our CSS doesn’t get out of hand and become difficult to manage.

Preprocessors save us time and do a lot of the tedious stuff for us because they have all the neat features we wish plain vanilla CSS had, like nesting selectors, math functions, referencing a parent selector, even reporting errors by telling us where and why there are errors in our code.

Example of nesting selectors in a preprocessor:

header {
  margin-bottom: 20px;
  nav {
    height: 30px;
    a {
      color: white;
    }
  }
}

Compiles to:

header {
  margin-bottom: 20px;
}
header nav {
  height: 30px;
}
header nav a {
  color: white;
}

LESS

Written in JavaScript, LESS extends CSS with dynamic behaviors like variables, mixins, operations and functions. The LESS documentation seems more designer friendly and the syntax looks closer to pure CSS, so it’s a smoother transition into a preprocessor. Frameworks like Bootstrap are using LESS to take advantage of its dynamic features. LESS also allows the classes we write to be reusable as mixins anywhere in the stylesheet.

.border-radius {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

We can call the class anywhere in our stylesheet:

header {
  .border-radius;
}

Sass

Written in Ruby, Sass also extends CSS by adding nested rules, variables, mixins, functions and much more. Many popular frameworks like Foundation 3 are built with Sass. One of the best parts of using Sass is that we can use it with Compass, a framework of functions and add-ons built on top of Sass that streamlines our process, creates image sprites dynamically, writes cleaner code, and has great output for CSS3 features – together they are a powerful combination. We also have the ability to create responsive CSS-based grid systems with Susy.

Sass has two syntaxes: SCSS, which stands for “Sassy CSS,” and the older indented syntax known simply as “Sass.”

The Sass syntax uses indentation instead of curly brackets to delimit blocks of style. It also uses line breaks instead of semicolons to separate statements. This syntax is more concise and easier to read.

Example Sass syntax:

.headline
  color: blue
  font-size: 2em

The SCSS syntax was introduced as the “new main syntax” for Sass in version 3. It uses the curly brackets and colons like regular CSS — it’s actually a superset of CSS — and contains all of its same features along with those of Sass. Because of the familiar CSS syntax, SCSS provides a lower barrier to entry.

Example SCSS syntax:

$link-color: blue;  /* create variable for all links */
$padding: 20px;  /* create variable for padding */

nav {
  padding: $padding;
}
.sidebar a {
  color: $link-color;
}

Stylus

Also written in JavaScript (node.js), Stylus comes equipped with many of the features provided by Sass and LESS; it supports both an indented syntax and regular CSS style. Stylus can be used with Nib, an extensions library similar to Compass that provides cross-browser CSS3 mixins. The syntax is very minimal and flexible. For example, curly brackets, colons, semicolons, and parentheses are not required.

Example syntax:

h1
 font 2em Helvetica, Arial, sans-serif

Helpful Tools

If using a preprocessor scares you off because it involves diving into Terminal, command line syntax, Ruby or JavaScript, the following are helpful tools that do most of the heavy lifting for you.

• CodeKit: Compiles your Sass, LESS or Stylus files, then automatically reloads your browser when a file is updated. It also optimizes your project images for faster performance.
• LiveReload: Monitors changes in your files, then processes them as needed while automatically reloading the browser for you.
• Scout: Runs Sass and Compass in a self-contained Ruby environment, so you’ll never have to worry about Ruby setup or any technical issues.
• SimpLess: Easy-to-use LESS CSS compiler.

Conclusion

Preprocessors might be worth incorporating into your workflow, and if you’re serious about using one, try a few out, then choose one that suits your workflow — and mindset — best and not because it’s the most talked about.

A great way to slowly integrate Sass, LESS or Stylus into your project is by changing the “.css” file extension in your stylesheet, then refactor your code by creating variables or mixins for properties or blocks of code that are repeated. If you’re still not sure, codepen.io is a great sandbox where you can test a lot of what we’ve discussed in one code window.

Hopefully now you’re feeling more confident about using a CSS preprocessor. When in doubt, you can always fall back to plain CSS in your preprocessor file. Remember that you’re not learning an entirely new language — just a new syntax.

Do you have a favorite CSS preprocessor? Let us know in the comments below.

• code
• compass
• css
• css preprocessors
• css3
• make a website
• sass