SCSS

March 14, 2013

I’ve been learning some Sassy CSS and wanted to talk about three awesome features that it provides: variables, nesting and mixins.

At a high level, Sass is simply a CSS preprocessor with two syntaxes:

The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax indented syntax</a> (or just .sass). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS.

I prefer using SCSS because it uses brackets and semi-colons, just like CSS. It also doesn’t care about indentation levels or white-space, like the second syntax. SCSS contains all the features of CSS, but has been expanded to include the features of Sass as well.

Installing SCSS

You will need to get Sass setup on your project before you can start using it. A lot of the new frameworks come with Sass pre-installed. Here are some great resources to help you:

Variables

I was recently pairing with my mentor Stephanie and we decided on the blue hex #25a8e0 for our links and buttons. Now try remembering that hex number each time you need to use it. Hard, right? We kept forgetting and had to stop and look it up.

This is where variables becomes a huge time saver:

Variables allow you to re-use colors, sizes, and other values without repeating yourself. This means that changes that should be small, such as tweaking the coloring or the sizing, can be done in one place, not all over the stylesheet.

SCSS allows you to set variables that can be used throughout your stylesheet. Variables start with $ and are declared just like properties. You can use any value that the CSS property allows such as colors, numbers or text.

// Variables
$blue: #25a8e0;
$dark-blue: #2197c9;

// Basic Styles
a { color: $blue; }
a:hover { color: $dark-blue; }

Pretty awesome right? I just set my variables and label them. Now I only have to remember $blue rather than #25a8e0.

Nesting

Repeating yourself in your CSS is annoying and makes your files unnecessarily long. SCSS allows you to avoid this by nesting child selectors within parent selectors.

With CSS, you might be writing something like this:

a { color: $blue; }
a:hover { color: $dark-blue; }

& is a Sass special character. In a selector, & will be replaced verbatim with the parent selector.

Let’s take the previous example and nest them:

a {
  color: $blue;
  &:hover { color: $dark-blue; }
}

Much cleaner! Now let’s look at an example for a navigation:

nav {
  float: right;
  margin: 0.75em 0;
}

nav ul {
  list-style: none;
  line-height: 2.25em;
  padding: 0;
}

nav ul li {
  float: left;
  margin-right: 5px;
}

nav ul li a {
  font-size: .9em;
  border-radius: 3px;
  color: #fff;
  font-weight: 300;
  letter-spacing: 1px;
  padding: .5em;
  text-decoration: none;
  text-transform: uppercase;
}

nav ul li a:hover {
  background: #222;
  color: #FFF;
  text-decoration: none;
}

That’s a lot of repeating. Instead, let’s nest this bad boy:

nav {
  float: right;
  margin: .75em 0;

  ul {
    list-style: none;
    line-height: 2.25em;
    padding: 0;
  }

  li {
    float: left;
    margin-right: 5px;
  }

  a {
    border-radius: 3px;
    color: #fff;
    font-size: .9em;
    font-weight: 300;
    letter-spacing: 1px;
    padding: .5em;
    text-decoration: none;
    text-transform: uppercase;

    &:hover {
      background: #222;
      color: #fff;
      text-decoration: none;
    }
  }
}

Boom! This is a great example of how to DRY up your CSS code. It does take some getting use to, but after a short while you’ll never want to go back to plain ole CSS.

Mixins

Mixins are one of Sass’s most powerful features. They allow re-use of styles without having to memorize or copy and paste them.

Mixins are defined using the @mixin directive, which takes a block of styles that can then be included in another selector using the @include directive.

So let’s say I want to add a nice fade transition to my link and button classes:

a {
  color: $blue;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}

a:hover { color: $dark-blue; }

.button {
  color: $blue;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}

.button:hover { color: $dark-blue; }

That’s a lot of repetition! Let’s use @mixin directive and set a name of fade:

// Mixins
@mixin transition {
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}

// Basic Styles
a {
  @include transition;
  color: $blue;

  &:hover { color: $dark-blue; }
}

.button {
  @include transition;
  color: $blue;

  &:hover { color: $dark-blue; }
}

Pretty handy right? Let’s get more complicated with some properties that would be harder to remember:

// Mixins
@mixin box-shadow {
  -moz-box-shadow: 0 1px 3px rgba(64, 56, 41, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(64, 56, 41, 0.2);
  box-shadow: 0 1px 3px rgba(64, 56, 41, 0.2);
}

// Elements
.box {
  @include box-shadow;
  background: #ddd;
  padding: 1em;
}

.data-box {
  background: #fff;
  @include box-border;
}

Now we can reuse box-shadow on other properties quickly without all the mess.

Give SCSS a try! It makes your front-end coding easier and faster. While SCSS is not an extension of the CSS standard itself, it gives you powerful new features that CSS lacks. Thanks for reading!