Sass

Remember in our first JavaScript Developer Toolkit article I've told that you would need to install Ruby. Today we'll see why and the reason is Sass.

Sass is an extension of CSS3 that helps you creating better stylesheets with less effort. Sass frees you from repetition and gives you tools to be creative. Since you can implement changes much faster, you’ll be able to take your design in a more boldly manner. Your stylesheets will be able to keep pace with changes, all while producing standards-based CSS you can use in any environment. As mentioned already, the Sass processor is written in Ruby. However Ruby environment has to be only installed on the development environment, so it doesn't matter how you write your server side. You only deploy the generated CSS files to production environment.

gem install sass

Sass offers a lot of features such as variables, nesting, importing, mixins and many more. I'll cover the most important of them, but make sure to read the reference to make the best of it.

Variables

One of the major benefits of Sass is the variables it brings to CSS. Variables allow you to name CSS values that you use repeatedly and then refer to them by name rather than repeating the value over and over. Variables can be declared globally or inside the scope of specific rule. The latter will only be active within the declared scope. As you can see it can be used even inside the rule, like we did in border.

$panel-color: #001122;
.panel {
 $width: 100px;
 width: $width;
 color: $panel-color;
 border: 1px $panel-color solid;
}

Nesting CSS rules

One of the most annoyingly repetitive aspects of CSS is writing selectors. When you’re writing a bunch of styles, that all target the same section of the page, you often need to write the same ID over and over again. Sass takes care of that by introducing nesting. Look at the following nested rules:

#content {
 article {
  div { color: #123 }
  &:hover { color: red }
 }
 aside {
  background-color: #eee
  :hover { color: red }
  border: {
   style: solid;
   width: 1px;
  }
 }
 > section { color: #555 }
}

When Sass engine runs, the nesting rules will be flattened and rewritten into regular css rules. Notice the difference between hover rules in lines 4 and 8. The engine replaces the & sign by the parent object, article, generating article:hover, whereas plain hover is appended to the parent generating article :hover. Sass also supports sibling and child selectors as well as nesting of CSS properties, border rule in our example.

#content > section { color: #555 }
#content article div { color: #123 }
#content article:hover { color: red }
#content aside {
 background-color: #eee;
 border-style: solid;
 border-width: 1px;
}
#content aside :hover { background-color: #eee }

Mixin

When you have a few small stylistic similarities throughout your site, colors and fonts that you use consistently, variables are a great way to keep track of them. But when your styles get more complicated, you need to be able to reuse more than just individual values. That's when it's time to use mixin. It groups the rules into one named block, to which we can pass parameters and make it even more flexible.

@mixin rounded-corners(
 $radius: 5px) {
 -moz-border-radius: $radius;
 -webkit-border-radius: $radius;
 border-radius: $radius;
}
.notice {
 border: 2px solid #00aa00;
 @include rounded-corners(6px);
}

The rule above will be transformed into this:

.notice {
 border: 2px solid #00aa00;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
}

I hope you found some interest in the Sass and we'll give it a change. Truth is - once you do, you'll never let it go. Next time we'll talk about Compass - a cookbook of various CSS recipes.