Recently, I have been introduced to a fun technology called Sass. I’m not referring to some kind of “Developers Gone Wild” situation or programmers with attitude. I mean the stylesheet language started in 2007 called Sass (Syntactically Awesome Stylesheets). Developed by Hampton Catlin and Nathan Weizenbaum, Sass is a language that extends CSS3 and is interpreted by a Sass compiler into CSS for general use in a web project. So what makes Sass so awesome?

First, Sass introduces variables into your styling workflow. Let’s say you want to reuse the same color throughout your project. Sass allows the assignment of variables that can be referenced anywhere in your stylesheet like so:

$textColor: #333;
p {
color: $textColor;

Sass variables support numbers, units, strings, colors, and Booleans (true or false), saving you from memorizing the repetitive details of your stylesheets.

Second, Sass adds support for nesting code blocks. Rather than typing out

table {...}
table tr {...}
table tr td {...}

You can simply nest your selectors to achieve the same result, seen below.

table {
     tr {
          td {

This has to be my favorite feature of Sass as it has kept me from retyping the same selectors five times over to style a table or some small portion of a site.

The third time saving feature of Sass is its mixing capabilities. Much like functions in server side languages, mixins allow you to define styles for certain elements that can be reused simply by referencing the name of the mixin. Check out this example from the Sass homepage.

@mixin table-base {
     th {
          text-align: center;
          font-weight: bold;
     td, th { padding: 2px }
@mixin left($dist) {
     float: left;
     margin-left: $dist;
#data {
     @include left(10px);
     @include table-base;

You’ll notice in the mixin named “left” that Sass also allows arguments to be used in the mixin. This allows even greater flexibility, more logically organized code, and saving you even more time now and in terms of future changes.

Last but not least, Sass features Selector Inheritance. Maybe you have a generic H1 element on your site with some styles attached to it. But then you also have an H1 used for blog posts that uses the class ‘post-title’. Instead of rewriting the styles from the generic H1 to, save yourself some time and use Sass’s Selector Inheritance. Check out the example below for better explanation.

h1 {
     font-size: 36px;
     color: #000;
} {
     @extends h1;
     border-bottom:2px solid #000;

This neat little feature will save you from duplicating your styles for variants of your already styled elements.

In short, Sass, the Syntactically Awesome Stylesheet, adds the key features CSS has been missing to save you time and headaches with your stylesheets. Check out Sass at!

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Related Posts