Select Page
Stay up all night and get SASSy.

Stay up all night and get SASSy.

Do you like  how easy CSS has made your life as a front-end developer? I know I sure have.

Have you heard about SASS? Me neither – that is, until last year. See, SASS is the new, sexy CSS extension that makes your life a lot easier. SASS, or Syntactically Awesome Style Sheets,  is a scripting language that is interpreted into CSS. What does that mean? Well, you have some flexibility that isn’t offered in CSS – things such as variables, nesting, mixins, arguments and variations thereof.

It may seem complicated at first, but if you are familiar with other programming languages and have a good understanding of CSS it should come pretty naturally.

 

 

In SASS, variables are defined using the $ sign:

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

 

Once compiled, it will generate the following output:

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

 

This is a pretty basic example – SASS can be as simple or complex as you want to make it. My personal suggestion if you’re just starting to dip your toes into that SASSy water is to take a stylesheet that you have worked on in the past and SASS-ify it. Find those places where you have repeating variables – things like font size, weights, colors, padding, dimensions, and convert those into variables. You’ll immediately see the value in creating a SASS document. For instance, say you’ve been working on a site for months on end – your stylesheet is a mile long and the client wants to switch out the font-face elements. Instead of the old way, which would be either doing a global search and replace or manually searching for every instance of that “Fat Comic Sans Slanted” font, you can change the one variable, $fontface1 : “Helvetica Neue”.

This is perhaps the simplest form of SASS you will encounter. I’ll talk more about leveraging SASS in future posts, so I’ll leave you with the following resources to help you get started:

SASS Homepage – learn about SASS here, straight from the original source

Scout – a GUI for SASS development – in my opinion, the best tool for those who are not familiar with Ruby and command line interface

SASS Online – try it out for yourself in this online interface

Update 10/1/2013:

Are you on a Mac? I was just introduced to this cool app that does SASS called Code Kit – check it out as well!