SASS and Compass

You may have heard the terms Sass or Compass being thrown around recently. Or perhaps you haven't. But regardless of if you've heard about it or not, Sass is something that any Front End Web Developer should have tucked in their tool belt. Basically, Sass is a simpler way of writing CSS. You might ask yourself: "Why would I want to write Sass when I am already proficient in CSS?". Well the answer to that varies depending on who you are.

For me, the feature that really draws me into Sass is cross-browser support. Have you ever wanted to use, for example, a linear gradient, but end up having to find a gradient generator, or check CanIUse(caniuse.com) or similar sites so that you know which vendor prefixes to use? That might be fun and exciting the first dozen or so times, but eventually it gets a bit old. One nice thing about Sass is that you can just type:

.some-class {
  @include background(linear-gradient(top left, #fff, #eee 50%, #000 100%));
}

into your CSS, and it will automagically spit out:

.some-class {
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(50%, #eeeeee), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top left, #ffffff, #eeeeee 50%, #000000 100%);
  background: -moz-linear-gradient(top left, #ffffff, #eeeeee 50%, #000000 100%);
  background: -o-linear-gradient(top left, #ffffff, #eeeeee 50%, #000000 100%);
  background: linear-gradient(top left, #ffffff, #eeeeee 50%, #000000 100%);
}

There is a bit more to it than that, as you need to get Compass, which is basically the Sass compiler and then compile your Sass. But it really is a pleasurable workflow once you have it all set up.

Some other things that Sass can do is have variables, so you don't have to jump into Photoshop and grab your logo's color every single time you want to use it in your stylesheet, resulting in tons of different colors being declared throughout the file. Sass also greatly simplifies nesting. For example:

#someId {
  @include transition(all 0.3s ease);
  .someClass {
     .someDeeperClass {
       @include background-clip(rect(0px,50px,200px,0px));
       @include rotate(-25deg);
     }
  }
}

Would result in:

#someId {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#someId .someClass .someDeeperClass {
  -webkit-background-clip: rect(0px, 50px, 200px, 0px);
  -moz-background-clip: rect(0px, 50px, 200px, 0px);
  background-clip: rect(0px, 50px, 200px, 0px);
  -webkit-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

It really is very simple once you have messed around with it for an hour or so, and the code that comes out of it feels refreshingly clean!

If any of this Sass stuff sounds like fun, I suggest checking out the following article by Adam Stacoviak on The Sass Way, and checking out Chris Coyier's Screencast on the topic.