Wednesday 2nd May 2012 by Jon Hadley

---

"Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin." 

- Via Sass-lang.com

We've recently been using Sass in Drupal 7 via the base theme Sasson.

Sasson deserves a blog post of it's own - it's got many useful, non Sass features to speak of. Most importantly though, it does just enough, without getting in your way, or isolating too many settings to the admin interface. The project maintainers in particular, are refreshingly open and responsive.

But, what's so great about Sass, particularly in a real-world agency environment? I'm not going to cover everything - refer to SASS's great documentation for that but let's dive into some examples of it's major features, from a real world, recently completed project:

Variables

$background: #fff;
$body-text: #000;
$standard-padding: 30px;
$standard-line-width: 2px;
$block-width: 980px;

By far the quickest and most obvious time savers are variables. Most large websites will end up duplicating certain standard brand colours, text sizes and padding widths etc. across the site.

Not only is it tiresome to re-write these every single time (to the point where I dream about the hex codes for projects built 6 years ago), it's also prone to human error when the inevitable re-brand takes place and you have to search and replace each value.

Having these variables in a single, easy to read file, also has the knock on effect of making sure you Don't Repeat Yourself, as you'll very quickly pick up on duplications or unnecessary variations.

Moreover, once these variables are defined, it's incredibly easy to rebrand cookie cutter sites, by just swapping in new variable library files.

Even better, Sasson can provide variables defined via it's Drupal admin page.

This is particularly useful for responsive grid layouts:

.views-row-odd {
    padding: [gutter-width] 0 [gutter-width] [gutter-width];
}
.views-row-even {
    padding: [gutter-width] [gutter-width] [gutter-width] 0;
}

Operations on variables

But what about variations on those standards? Sass allows for that, and more.

You can perform mathematic operations on previously defined variables:

padding: $small-padding/2;

Even better, you can combine variables and operations. In the example below, I'm automagically catering for the extra space the padding will add to the width of the box:

width: $block-width-$small-padding*2;

Mixins

Mixins are similar to variables, but with multiple lines.

This is a commonly used font-face mixin of mine:

@mixin font-gothic {
    letter-spacing: 0.015em;
    font-family: "alternate-gothic-no-2-d", sans-serif;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}

Rather than repeat these 5 lines every time I want to include the custom font, I now just include the line as follows:

h3 {
    font-size: 24px;
    @include font-gothic;
}

The time saving potential of Mixins are endless. They're particularly great at condensing multi-line CSS3 vendor prefixes down to one line.

Mixins & Arguments

One of my favourite features of Mixin's is the ability to add arguments. Again, multi-line CSS3 effects, or cross browser fixes can easily be condensed to one liners. Consider the min-width hack:

@mixin minimum-width($min-width)  {
    min-height:$min-width;
    height:auto !important;
    height:$min-width;
}

In your scss file you can now just supply a pixel value and all the work is done for you:

#navbar { 
    @include minimum-width(980px); 
}

Nesting

Once you've used it, you'll find it hard to look back from nesting. Traditional CSS just seems so bloated in comparison.

Two of my favourite time savers:

Nested lists

ul li {
    list-style-type: circle;
    ul {
            padding-left: 1em;
        li {
                list-style-type: square;
            }
    }
}

Link and hover states

a {
    &:link,
    &:visited {
            color: $body-link;
            text-decoration: none;
    }
}

a {
    &:focus,
    &:hover,
    &:active {
        color: $body-text;
            text-decoration: underline;
    }
}

Conclusion

As the examples above should make clear, not only does Sass make CSS quicker, easier and dare I say it, more fun to create, especially in large CMS contexts; it also drags CSS kicking and screaming into the 21st century, finally adding the dynamic functions we've been afforded in every other language.

Indeed, The W3C has taken note and a working draft for 'CSS Hierarchies' (think nesting) is gaining steam - well, W3C steam at least, at the usual rate of change it will probably be ratified in 2064!

What about LESS?

LESS CSS (not the LESS Framework) was influenced by Sass - in fact, Sass's newer SCSS syntax was in turn added as a response to LESS 's cleaner, reusable syntax.

We tried LESS on another project, before settling on Sass. To be honest, there's not a lot to choose between them. We just found the Sass compiler slightly easier to work with and the brilliant Drupal integration offered by Sasson was the final nail in the coffin.