Tips for getting started with Sass

• 3 min read

🚧

Whoa there!

This post contains code that's more than 12 years old. It might be fine, but you should probably check to make sure this isn't incredibly stupid by today's standards.

I’m still only ankle-deep in the world of Sass, but I already can’t imagine building a site without it. Getting it up and running is pretty straightforward, and nesting selectors likely makes perfect sense to you because you’ve probably been wondering for years why CSS doesn’t already do this.

Nesting selectors is great and all, but over the last few years, a new shortcoming in CSS has popped up. Namely, keeping up with vendor prefixes. Most of the cool CSS3 features would be inaccessible to designers if we avoided vendor prefixes, and so, we do use them. We use lots of them. Browser support for new features is evolving rapidly, and it’s hard to keep up. Sass can help.

I’ve already discovered a few basic tricks that can help you get up and running with Sass very quickly.

Getting started

You’ve got Sass installed, right? It spits out neatly formatted CSS. But you don’t want neatly formatted CSS. You want to compress the hell out of it and get that page to load .001 seconds faster. They tell you how to do this in the Sass documentation, but they do it in the most roundabout way possible. Here’s all there is to it.

sass --watch --style compressed style.scss:style.css

That was easy.

Mixin’ it up

Nested selectors rule, but they just scratch the surface. To wrangle those vendor prefixes, you need mixins.

Here’s your first mixin:

@mixin box-shadow ($box-shadow) {
  -webkit-box-shadow: $box-shadow;
     -moz-box-shadow: $box-shadow;
      -ms-box-shadow: $box-shadow;
       -o-box-shadow: $box-shadow;
          box-shadow: $box-shadow;
}

To use it, just call up the mixin with the @include statement and give it some standard values for that property.

div {
  @include box-shadow(1px 1px 5px #000);
}

This is what you’ll get after Sass detects the change:

div {
  -webkit-box-shadow: 1px 1px 5px #000;
     -moz-box-shadow: 1px 1px 5px #000;
      -ms-box-shadow: 1px 1px 5px #000;
       -o-box-shadow: 1px 1px 5px #000;
          box-shadow: 1px 1px 5px #000;
}

Simple, right? Just substitute virtually any other vendor-prefixed CSS3 properties that share the same syntax and this technique will work just fine.

So where won’t it work? Gradients. Ugh, I know, right? Safari 5.1, which only came out with the release of Lion, is the first version to bring its gradient syntax into sync with the W3C proposal and every other browser vendor’s current implementation.

Off the top of my head, it seems safe to say that older versions of Chrome probably won’t support it, but Chrome updates automatically, so it’s much less of a concern. Keep an eye on your visitor logs for Safari 534.50 or later and sooner or later it’ll be safe to drop the older Webkit gradient syntax.

You might be thinking this might also not work with Firefox’s stupid border-radius syntax. Well, stop. Use the border-radius shorthand instead. Unfortunately, older versions of Safari won’t recognize the shorthand, but remember, we’re talking about rounded corners here, which degrade incredibly gracefully. You don’t care if old versions of Internet Explorer get rounded corners, do you? Occasionally you have to leave Safari behind too. Just use the shorthand and move on.

Back to this mixin technique. It works fine when you have one value, but what if you want to specify more than one box-shadow? There’s two ways to handle that, and for my money, one is better than the other.

Here’s the less good way:

@mixin box-shadow ($box-shadow-1, $box-shadow-2) {
  -webkit-box-shadow: $box-shadow-1, $box-shadow-2;
     -moz-box-shadow: $box-shadow-1, $box-shadow-2;
      -ms-box-shadow: $box-shadow-1, $box-shadow-2;
       -o-box-shadow: $box-shadow-1, $box-shadow-2;
          box-shadow: $box-shadow-1, $box-shadow-2;}

Separate the two shadow values with a comma, just like you’d do with normally.

div {
  @include box-shadow(1px 1px 5px #000, 1px 1px 1px #000);
}

Here’s the way I prefer to handle this: Just keep the original mixin you set up earlier. Then, set up a variable that contains both box shadows:

$realistic-drop: 1px 1px 5px #000, 1px 1px 1px #000;

Just call it like this:

div {
  @include box-shadow($realistic-drop);
}

You can make the variable as complicated as you want. Add 100 drop shadows and you still just need to call one variable.

Take advantage of Modernizr

Have I mentioned that I love Modernizr? Only constantly. But where do you stick all those Modernizr classes in your stylesheet? Should you use them inline or make a separate section of your stylesheet and keep them all together? With Sass, there’s a good case to be made for keeping them together because Sass’s nested selector syntax will help you keep track of those Modernizr selectors.

Here’s an example:

.no-rgba {
  div {
    background: #fff;
  }

  p {
    color: #333;
  }
}

This becomes:

.no-rgba div {
  background: #fff;
}

.no-rgba p {
  color: #333;
}

Depending on how much you take advantage of Modernizr, this can come in really handy. RGBA is pretty basic, but once you start getting into things like 3D transforms, where you probably have to rewrite large parts of your layout to gracefully degrade, you’ll be glad you’ve got Sass to help keep your selectors in check.

That is not all

This isn’t supposed to be the definitive guide to Sass. It’s really just a few things to help you build up speed a little faster. If you’re looking to take it to the next level, check out the Compass Framework or Bourbon.

As usual, there’s a Gist on GitHub. Hit me on Twitter or comment at GitHub if you want to shower me with praise or anything else.