SASS: Writing CSS has never been this good

Ken Woodworth

A while ago we (Joel) published an article titled, “LESS, The Flavor of CSS You Should be Writing for Drupal.” At the time (2010), preprocessors were just starting to gain popularity. LESS seemed great and there was a Drupal module for compiling on the server. So, we switched from CSS to LESS. It was fantastic. Variables, mixins, nested rules; everything we ever wanted in CSS.

A year or so later the talk around SASS picked up. We hadn’t considered it as an option when first exploring preprocessors because SASS 3 wasn’t released yet. SASS 3 is notable because it marked the introduction of the .scss syntax (a syntax that more closely mirrors CSS). On top of a more familiar syntax, SASS 3 brought the @extend directive. This was the thing that made me excited (I’ll talk more about that later). It was clear that SASS was outpacing LESS when it came to features. So, we switched again.

I’m not going to get into a SASS vs. LESS comparison here. Chris Coyier recently published a fantastic article, “SASS vs. LESS,” comparing the two preprocessors. Instead, I want to cover the three features that should convince you to use SASS over anything else.


@extend

This was the thing that made us switch from LESS to SASS. Let’s take a look at some CSS and see how powerful @extend can be.

First, here’s are two simple “mixins” (Supported in both SASS and LESS):

@mixin white-box {
    background-color: #fff;
}
@mixin blue-border {
    border: 1px solid #006699;
}

With these you can easily apply that CSS across a number of elements on the site like this:

.button {
    @include white-box;
    @include blue-border;
}

which becomes:

.button {
    background-color: #fff;
    border: 1px solid #006699;
}

Awesome! Oh wait, is that really awesome? Doesn’t this lead to a lot of redundant CSS? What if we want to use that CSS all over the place? What if that mixin has 10 lines of CSS instead of just 1? That CSS gets added for every time you include the mixin. Yow! You can see how this could quickly lead to huge stylesheets. Now let’s look at @extend.

Instead of mixins, let’s write some selectors. In this case, we’re going to use a new feature in SASS 3.2 alpha called “placeholder selectors.” Instead of using the “.selector” syntax, they use “%selector” which tells SASS not to render the base selector name. Here we go:

%white-box {
    background-color: #fff;
}
%blue-border {
    border: 1px solid #006699;
}

Then we use @extend to apply the styles like so:

.button {
    @extend %white-box;
    @extend %blue-border;
}

Which gives us this:

.button {
    background-color: #fff;
}
.button {
    border: 1px solid #006699;
}

“Hold on. That’s not better!” is what you’re probably saying. First, settle down. Let me explain.

Ok, ready? Let’s look at a more complex example.

%white-box {
    background-color: #fff;
    border: 1px solid #006699;
    margin-bottom: 20px;
    padding: 20px;
}

Now we can write:

.box-1 {
    @extend %white-box;
}
.box-2 {
    @extend %white-box;
}

Which compiles to:

.box-1, .box-2 {
    background-color: #fff;
    border: 1px solid #006699;
    margin-bottom: 20px;
    padding: 20px;
}

Now that is cool! Instead of including those four lines of CSS each time, the selectors were joined together for more condensed, modular CSS. And this is just a simple example. The possibilities here are endless. (Quick note: This is not an excuse to just target any class or id and extend CSS rules. Check out SMACSS for some guidance on structuring your CSS.)


Media Queries

You know what’s hot? Responsive design. SASS makes it dead simple to work with @media queries in your CSS. Here’s a quick example:

.column {
    width: 940px;
    @media screen and (max-width: 960px) {
        width: 100%;
    }
}

which becomes:

.column {
    width: 940px;
}
@media screen and (max-width: 960px) {
    .column {
        width: 940px;
    }
}

Let’s take this a step further and include Sam Richard’s respond-to mixin (which can be found here: https://gist.github.com/2493551). This will create the same code as the previous example but with a shorter, easier to remember syntax. If you ever need to adjust things later, you just have to do it in one place.

$breakpoints: 'medium' 960px ‘max-width’;

.column {
    width: 940px;
    @include respond-to(‘medium’) {
        width: 100%;
    }
}

Compass

Finally, we can’t talk about SASS without talking about Compass. Compass is a CSS framework that will save you countless hours. COUNTLESS! Let’s talk about how.

Have you ever manually written all of the vendor-prefixed properties for border-radius or all the other CSS3 properties? Yeah, Compass does that for you.

.box {
    @include border-radius(5px);
}

How about gradients? They can be pretty tricky. With Compass they’re cake (http://compass-style.org/reference/compass/css3/images/).

.fancy-box {
    @include background(linear-gradient(white, $gray 25%, $blue 75%, black);
}

Do you design with a baseline grid? Well, Compass has oodles of mixins to help create a consistent vertical rhythm. (http://compass-style.org/reference/compass/typography/vertical_rhythm/).


I've covered a lot here but this is just a taste of what's possible with SASS and Compass. If you haven’t tried a preprocessor yet, do it. Right now! If you’re not sure what to use, use SASS. Try it and I guarantee you’ll realize within minutes how powerful it is and how much time you’ll save writing CSS.


About the Author

Ken has helped create beautiful work for amazing clients including Stanford, The World Resources Institute, The Smithsonian, Colonial Williamsburg, and Habitat for Humanity. Ken has a gift for creating beautiful, intuitive design systems for even the most complex requirements, and his design capabilities are matched by a thorough understanding and ability in multiple front-end technologies.

Read More