The Sassy Side of CSS – An Intro Guide to Sass

Being one of the most time & effort saving assets for web developers, SASS deserves a bit of credit from our team at Envoke Design. So without further adue we’d like to introduce you to SASS and why once you get “SASSy” its hard to turn back.

What is SASS?

In laymen’s terms, SASS is a adaption of CSS that extends the core functionality of CSS syntax to broaden its features, creating easier methods of accomplishing your stylesheets! Whew!… Sound like a mouthful? Let me expand on that; With SASS you get variables, functions, nested syntax, cross-browser support a breeze, mixins, color funtions, and efficiency like you wouldn’t believe. No Really, you don’t believe why its so amazing and you’ll never want to turn back? How about some examples to get you started:

Compilers for SASS

There are lots of ways to compile your SASS files. I love Codekit, compass is great, you can even find extensions for programs like Coda 2 and PHP Storm to handle SASS compiling.

SASS Mixins

Mixins are at the core of it all and are extremely powerful. Mixins create variables for reusing simple CSS functions and snippets of code. Being extremely flexible you can define a mixin to handle re-usable snippets to save redundancy in your code. For instance when we look at cross-browser compatibility defining some like “Border Radius” can be very tasking.
Traditional CSS method of Border Radius

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

As you can see a simple method such as this requires re-creating the variable 3 times to achieve cross-browser support.
SASS Mixin for Border Radius

/*********************
BORDER RADIUS
*********************/
/*
USAGE: @include border-radius(4px 4px 0 0);
*/

@mixin border-radius($radius...) {
// defining prefixes so we can use them in mixins below
$prefixes: ("-webkit", "-moz", "-ms", "-o", "");
@each $prefix in $prefixes {
#{$prefix}-border-radius: $radius;
}
border-radius: $radius;
}

Okay so that is our SASS Mixin and as defined in the comment here is how we execute it on our CSS classes.

@include border-radius(4px 4px 0 0);

In the end a simple single line of code can now accomplish the what used to require us writing 3 lines worth. This is just one of many mixin examples that can save you a huge headache and most importantly a HUGE amount of time on your web projects.

Color Functions

Color functions are awesome! You can globally assign a “function” to a color for consistency and ease of control. For instance. Lets say I want all my headers to be the same color. MAYBE I’m not set on that color, but for now we’ll make it a shade of blue ( rgba(54, 137, 187, 1.0) ). Okay… So with standard CSS. For every header class I simple use ” color: rgba(54, 137, 187, 1.0) ; “… Simple! …. So what lets say I change my mind and now I want red? No big deal, just search and replace and we have red, but here is the faster, easier, better method using SASS:
First I define a SASS color with my mixins like so :
$header-red:   rgba(54, 137, 187, 1.0);
Now we implement the color, like so, for our classes
color: $header-red;
The best part…
Now anywhere we use the “$header-red” color function we can globally change those classes everywhere by simply changing how we defined our mixing. Cool…
 

Variables

Expanding from our color function we can move into simple ways to achieve relative colors. For Example:
$light-red: lighten( $header-red, 10% )
$darken-red: darken( $header-red, 10% )


Conclusion to working with SASS

There is too much material to cover when it comes to this subject. So please stay tuned to this particular blog post as we will frequently revisit it and expand on some simple practices to get you started working with SASS. The bottom line is that SASS has certainly influenced our workflow for the better and for that we encourage you to get a little “SASSy”. Cheers!