Sass

A Brave New World!

Unlike some of the technologies I'm skilled at, Sass is new.  Very new to me, I only discovered it early in 2012, but I'm already addicted to it.  I pretty much refuse to write CSS any other way, and if I'm working on any websites, you can guarantee I have the Sass parser watching for changes!

Syntaticaly Awesome is Right!

Sass is awesome.  Here are some reasons why:

Nesting

In CSS, it is common to have nested rules.  For instance:

div#list p.item {
  rules: here
  ...
}

Here we have a rule that is affecting paragraph tags with a class of item located inside of a div with the id of list.  Of course, we probably have some rules to apply to our list div directly, so in reality, we probably have something more like this:

div#list {
  rules here...
}

div#list p.item {
  rules: here
  ...
}

Sass does a lot for us, but in this example, there are 2 powers at work:

  1. Let's us nest our rules.
  2. Removes the need for {} (brackets) and ; (semicolon)  - this comes at the cost of strict white-spacing rules that are intuitive in nature.

Here's how we'd write the above in Sass:

div#list
  rules: for
  list-div: here

  .item
    rules: for
    item: here
Variables

In CSS, repetition is common.  We might use the same color value in dozens of places, border-radius and other CSS rules require multiple lines with the same radius value to support multiple browsers (and to affect different corners.)  To combat this non-DRY mess, Sass gives us variables, and smart ones at that.  Let's take a look at some messy CSS, and then check out the beautiful Sass:

.css-example {
  width: 300px;
  height: 300px;
  background: #333;
  -webkit-border-radius: 4px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius: 4px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-radius: 4px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;  
}

Here we've defined a set of rules that will give us a 300px x 300px dark-grey box, with the top-left & bottom-right corners rounded to 4px, and the other 2 corners rounded to 8px. It's a mess, no?

Let's try using some variables to clean it up in Sass:

$boxSize: 300px
$boxBGColor: #333
$boxCornerRadius1: 4px
$boxCornerRadius2: $boxCornerRadius1 * 2

.css-example
  width: $boxSize
  height: $boxSize
  background: $boxBGColor
  -webkit-border-radius: $boxCornerRadius1
  -webkit-border-top-right-radius: $boxCornerRadius2
  -webkit-border-bottom-left-radius: $boxCornerRadius2
  -moz-border-radius: $boxCornerRadius1
  -moz-border-radius-topright: $boxCornerRadius2
  -moz-border-radius-bottomleft: $boxCornerRadius2
  border-radius: $boxCornerRadius1
  border-top-right-radius: $boxCornerRadius2
  border-bottom-left-radius: $boxCornerRadius2

I cheated a little bit. Check out $boxCornerRadius2's definition. I'm using another variable and math to define it's value. This shows how powerful variables are, allowing you to stay REALLY dry. Of course, it gets better with Mixins.

​Mixins

Mixins allow us to define a block of CSS, and then "mix-it-in" to our CSS definitions.  They can even take arguments! Checkout the re-factored example of the Sass above:

$boxSize: 300px
$boxBGColor: #333
$boxCornerRadius1: 4px
$boxCornerRadius2: $boxCornerRadius1 * 2

@mixin myBorderRadius($radius1, $radius2)
  -webkit-border-radius: $radius1
  -webkit-border-top-right-radius: $radius2
  -webkit-border-bottom-left-radius: $radius2
  -moz-border-radius: $radius1
  -moz-border-radius-topright: $radius2
  -moz-border-radius-bottomleft: $radius2
  border-radius: $radius1
  border-top-right-radius: $radius2
  border-bottom-left-radius: $radius2
  
.css-example
  width: $boxSize
  height: $boxSize
  background: $boxBGColor
  @include myBorderRadius($boxCornerRadius1, $boxCornerRadius2) 

Awesome, now we have a a few variables defining all the widths, colors & border radius sizes, and a mixin we can re-use to generate all that messy CSS for us. In fact, we can move that mixin to another Sass file and re-use it in all of our Sass files!

​And Much More...

There's a lot more to Sass than what I've outlined here.  Head over to the Sass website for more details.

Conclusion

Sass is awesome.