Sass: An introduction to Syntactically awesome style sheets

You know what CSS is, but what is Sass? Well, buckle your seatbelt because you’re about to get a quick Sass intro that’ll knock your socks clean off.

To start, Sass stands for Syntactically awesome style sheets (say that 3x fast!).  The most basic definition of Sass is that it’s a CSS extension – in other words, Sass lets you do things that you can’t do with plain vanilla CSS.

But you might say, well regular CSS is pretty cool and it’s worked just fine for me so far, so do we really need Sass? Well, in the book Sass for Web Designers by Dan Cederholm, Chris Coyier from CSS-Tricks.com puts it like this:

HTML, CSS, and JavaScript have been *enormously* successful languages for moving the web forward in unprecedented ways. We’re building ever-bigger and more complex websites. That’s a beautiful thing. But we’ve come to the point where we need to take the next step in making what we build more manageable and maintainable.

Sass really is a big part of that next step. It makes styles easier to maintain and manage.

Benefits of Sass

Better organization & performance with Sass

With Sass, you can separate files into logical chunks called partials. For example, maybe you have a Sass file for your header styles and another for your footer styles. Partials let you keep your code clean, concise, and logically organized.

But what about performance? The good news is you won’t take any hits. All of those Sass files are compiled into a single CSS file, which means only one server call.

If you tried a similar approach with CSS, you’d have separate server requests for each CSS file, which would definitely slow your site load time.

Sass is simpler to maintain over time

Ever come across one of those 8,000 line stylesheets with a giant table of contents? And then somewhere along the way, another developer (or you!) tacked on a bunch of media queries or custom styles at the bottom? The result is a disorganized mess of styles, stashed in random places around a lengthy stylesheet.

Screw that.

Whether you’re inheriting Sass files from another developer or simply stepping into code you wrote a while back, working with Sass partials (those smaller chunks of logically grouped styles) makes it simpler to take in style structure at a glance and find the code you want to work with.

How does Sass deliver those benefits?

When I say that Sass is an extension of CSS, I mean that it’s able to solve problems that regular CSS can’t quite do yet.

Nesting

Sass lets you nest style selectors. This helps your organize your CSS by letting you group related rules together and achieve a nice visual hierarchy in your code.

Here’s a basic example of nesting styles for an unordered list within the .header class:

.header {

    padding: 20px;

    ul {
        margin: 20px 0;

        li {
            display: inline-block;
            float: left;
        }
    }
}

That bit of Sass would compile to this CSS:

.header {
    padding: 20px;
}

.header ul {
    margin: 20px 0;
}

.header ul li {
    display: inline-block;
    float: left;
}

You can see that the example makes it easier to visually follow the hierarchy of selectors. If you want to see other examples of cool things you can do with nesting, this is a great article.

Variables

It’s common in CSS to duplicate a lot of values. For instance, a site may have a color scheme and reuse a few colors throughout the site. Instead of repeating those colors every time, Sass* enables you to assign these colors to variables and then use those variables in your code.

Instead of assigning direct color values like this:

.nav {
   background-color: #0964DD;
}

.footer {
   background-color: #0964DD;
}

You could assign that color to a variable like this:

$main-color: #0964DD;

.nav {
    background-color: $main-color;
}

.footer {
    background-color: $main-color;
}

Instead of embarking on a giant find & replace mission, you can change the value of the variable once and it’s updated throughout your site.

* CSS does allow for the use of variables. The syntax is different that Sass and if you’re not ready for Sass, but are interested in using CSS variables, you’ll find this article helpful. Either way, variables are freaking awesome.

Math

You might not be a person who thinks MATH IS FUN! But you will after this little Sass intro! Here’s an example of using math to set a font size:

$base-font-size: 16px;

h1 {
    font-size: $base-font-size + 8;
}

caption {
    font-size: $base-font-size - 4;
}

In this scenario, I’ve set a variable $base-font-size equal to the value of 16px. I can then use that base size as a foundation to scale other font sizes on a site up or down. If you’re a typography nut, you can already see how this could help you implement vertical rhythm.

Of course, typography is just one use for math. You could use it for a lot of other things, including gutters, grids, media queries, etc.

Conditional Logic

Similar to JavaScript conditionals (or conditionals in other scripting languages), Sass lets you use conditional logic via control directives and expressions. You could say, “If the font size is 16px, make the color blue! If it’s larger than 16px, make it red!”

Mixins

Sass enables you to write DRY code (Don’t Repeat Yourself) by way of mixins. A mixin lets you make a group of CSS declarations that you want to re-use throughout your project. You can even pass in values to make your mixin more flexible.

A classic use of a mixin is for vendor prefixes. Let’s take a look at how you could use a Sass mixin to create rounded edges on an element.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

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

Here we’ve got a mixin called border-radius and we’re passing in a variable  $radius. You can see it includes each vendor prefix with a value of whatever $radius is. Now, whenever you want something to have a rounded edge, such as the element with this .box class, you just include the border-radius mixin and the size you want for the $radius.

And of course, you could use that mixin as many times as needed throughout your code.

And that’s just scratching the surface…

Should I use SCSS or Sass?

Sass has two syntaxes, or file extensions, available to use: SCSS and Sass.

SCSS syntax

The first is SCSS, which stands for “Sassy CSS” and that’s what you’ve already seen in this article. It’s the same syntax as CSS which means if you’re already proficient with CSS, you’ll feel right at home with writing SCSS.

As a matter of fact, you could take valid CSS and put it in a file with a .scss extension and you’d have a valid Sass file.

Sass syntax

The second syntax has been around longer and it’s known as the “indented syntax,” often referred to simply as Sass, which is highly unfortunate since Sass can refer to both the preprocessor and its own syntax. The semantics get a little confusing there.

.Sass uses indentation rather than brackets to indicate nesting selectors and newlines rather than semicolons to separate properties. The result is a more succinct, and arguably easier to read code, but the downside is that it’s not exactly the same to write as CSS, so there’s a little more learning curve here. The file extension for this syntax is .sass.

Overall, SCSS is a more approachable syntax if you’re just getting started. It’s also what I’ve seen more widely used in my experience.

A note on LESS: Sass has a competitor called LESS. They accomplish many of the same things and, like all things programming, different developers prefer different tools. But I’ll say this: the majority of popular CSS frameworks, including the latest version of Bootstrap, utilize Sass. WordPress has officially adopted Sass as well. Use whatever is best for your workflow, but know that front-end development is trending more heavily toward Sass.

Ready to use Sass?

This article is just a Sass intro – there’s so much more awesomeness to discover. To dig in further, I recommend the official Sass documentation – it’ll walk you through how to install Sass and introduce you to various tools you can use to compile Sass into CSS. I’ve also put together some quick start resources here to learn Sass.

Want to see Sass in action? The developer version of the Utility Pro theme for WordPress includes Sass (along with the Bourbon & Neat libraries) and a Grunt workflow.