Why I chose Sass

Learning to appreciate the advantages of using pre-processors like Sass CSS in my work flow was not very hard for me. At times the challenge has been convincing others of the advantages of Sass and at times it can be divisive. A pre-processor is a simple tool that will provide some of the following advantages:

Smooth some of the harsh edges and create code frameworks i.e. consistent code patterns
Extends the current process further by adding needed and missing features

A pre-processor like Sass does both.

My introduction to Sass was in 2009 during an interview for a job. During this interview, the interviewer asked me if I knew of Sass. I did not. However after the interview, I googled it and was introduced to the world of sass-lang.com. After the 5 minutes that it took to install it on my Mac (Sorry PC users, it might take 10 minutes for you), I was up and running. I played around with all its features and before I knew it, I was hooked.

In future projects, I was introduced to other CSS specific pre-processors like LESS, Stylus, and Closure Stylesheets. There has been certain feature sets that have made me gravitate back to Sass. Here are some of those features (I have used some code example from a real project) :

The Basics

All CSS pre-processors are built on the DRY (Don’t Repeat Yourself) principle. On that basis they all have the following features:

Variables
Import
Mixins
Functions
Selector Inheritance

Variables, Import, and Mixins are basic features that were my first foray into Sass and all by themselves have added quite a punch in this application.

CSS is a great language allowing designers and developers to improve the presentation layer. But until the introduction of pre-processors like Sass it has been a static language that uses its cascading feature to dynamically override styles and apply them to the presentation. With the introduction of Sass, DRY principles were added to CSS and therefore extending its features.

So let’s dive into some code and learn about Sass. The following is an example of a simple CSS. On one of the projects that I have been working on, I needed to create a header for sections of the site. This header will have a linear gradient background and white colored text.


/*This is a variable for the primary color of the side*/

$primary: #00096E;

/*primary grey color to be used throughout the site*/

$greyColor: #E0E0E0;

/*This is an example of a mixin that will create a linear gradient. The advantages of using this is

that we do not have to write the multiple vendor prefixed CSS repeatedly. And code maintenance is easier.*/

//this mixin will create a linear-gradient. The parameters passed here are:
//$pos: position of the gradient which defaults to top but can take bottom, left, or right
//$G1-G10: these allow for 10 color stops values, color and length/percentage
//$fallback: this is the fallback color that will be used for older browsers, if this parameter
//is not provided then the first color stop is used.
@mixin linear-gradient($pos, $G1, $G2: false,
 $G3: false, $G4: false,
 $G5: false, $G6: false,
 $G7: false, $G8: false,
 $G9: false, $G10: false,
 $fallback: false) {

 // Detect what type of value exists in $pos
 $pos-type: type-of(nth($pos, 1));

// If $pos is missing from mixin, reassign vars and add default position
 @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
     $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
     $pos: top; // Default position
 }

 $pos: unquote($pos);

$full: $G1;
 @each $g in $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10 {
     @if $g != false {
         $full: $full + ',' + $g;
     }
 }

$full: unquote($full);

 //If using COMPASS uncomment the line below and remove line 82 - 89
 //$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);

 // Set $G1 as the default fallback color
 $fallback-color: nth($G1, 1);

// If $fallback is a color use that color as the fallback color
 @if type-of($fallback) == color {
     $fallback-color: $fallback;
 }

background: $fallback-color;
 background: webkit-gradient(linear, $full);
 background: -webkit-linear-gradient($pos, $full);
 background: -moz-linear-gradient($pos, $full);
 background: -ms-linear-gradient($pos, $full);
 background: -o-linear-gradient($full);
 background: unquote("linear-gradient(#{$full})");
}

The above mixin is courtesy of Thoughbot’s Bourbon mix which has quite an extensive collection of Sass mixins and functions.

Functions

Sass comes with several built in functions. These are functions that are commonly used and they fall in the following categories:

RGB functions
HSL function
Opacity functions
Other Color functions
String functions
Number functions
List functions
Introspection functions
Miscellaneous functions

Aside from the built-in functions, custom functions can also be created.


.main-header {

    @include linear-gradient(top, $primary, lighten($primary, 20%));
    color: white;
    display: inline-block;
    font-size: rfs(36);
    margin-left: 20px;

}

In this example, we are taking advantage of built-in color functions by passing the primary color and a 20% percent lighten primary color to our linear gradient mixin. We also are using a custom function that we have created to calculate the pixel font size in em, for a more responsive approach. Here is the detail of that function:


// ==|===Responsive Font Size calculator====================
// Function that will calculate the responsive font size
// return the em value to be used.
// =========================================================*/
@function responsiveFontSize($fontSize: $defaultBrowserSize, $isIE: false) {
    @if $isIE {
        @return (($fontSize/$defaultBrowserSize) - 0.02) + em;
    } @else {
        @return ($fontSize/$defaultBrowserSize) + em;
    }
}
@function rfs($fontSize: $defaultBrowserSize, $isIE: false) {
    @return responsiveFontSize($fontSize, $isIE);
}

For more information on functions, refer to the Sass documentation.

Selector Inheritance

This feature is one of the best features of Sass and one of the least used. This feature allows the user to think of the CSS and its features holistically and ensure the proper relationship among all the presentation elements.

For example there are times that one class will encompass most of the styles needed however there will an addition of other classes that will include not the styles of the more general class but also some of its own. For example, in our code above we have a ‘main-header’ class. Now we want to create sub headers:


.main-header {

    @include linear-gradient(top, $primary, lighten($primary, 20%));
    color: white;
    display: inline-block;
    font-size: rfs(36);
    margin-left: 20px;

}

.sub-header {
    @extend .main-header;
    @include linear-gradient(top, $secondary, lighten($secondary, 15%));
    font-size: rfs(24);
}

In this example, we inherited all the styles from ‘main-header’ and over-wrote the linear gradient with a different color and reduced the size of our font. And the output will look something like this:


.main-header, .sub-header {
    background: #00096e;
    background: webkit-gradient(linear, #00096e,#0011d4);
    background: -webkit-linear-gradient(top, #00096e,#0011d4);
    background: -moz-linear-gradient(top, #00096e,#0011d4);
    background: -ms-linear-gradient(top, #00096e,#0011d4);
    background: -o-linear-gradient(#00096e,#0011d4);
    background: linear-gradient(#00096e,#0011d4);
    color: white;
    display: inline-block;
    font-size: 2.25em;
    margin-left: 20px;

}

.sub-header {
    background: #cfc35d;
    background: webkit-gradient(linear, #cfc35d,#e0d998);
    background: -webkit-linear-gradient(top, #cfc35d,#e0d998);
    background: -moz-linear-gradient(top, #cfc35d,#e0d998);
    background: -ms-linear-gradient(top, #cfc35d,#e0d998);
    background: -o-linear-gradient(#cfc35d,#e0d998);
    background: linear-gradient(#cfc35d,#e0d998);
    font-size: 1.5em;
}

For a more comprehensive example of selector inheritance read this article by Thomas Reynolds.

Placeholder Selectors

Placeholder selectors follow the guideline of selector inheritance with one major improvement, they are silent until needed. A placeholder selector is a series of styles that are created for when there is situation where it is needed. If it is not extended, it will not be compiled to the final css output. If it is extended then the resulted styles will be in the output but the placeholder selector will not be in the compiled css. If we follow the example above, then the code will look like this:


%header-setup{
 color: white;
 display: inline-block;
 margin-left: 20px;
}

.main-header {
 @extend %header-setup;
 @include linear-gradient(top, $primary, lighten($primary, 20%));
 font-size: rfs(36);
}

.sub-header {
 @extend %header-setup;
 @include linear-gradient(top, $secondary, lighten($secondary, 15%));
 font-size: rfs(24);
}

We placed the portion of the styles common to both classes in a placeholder selector and named it header-setup. The output of the code looks like this:


.main-header, .sub-header {
 color: white;
 display: inline-block;
 margin-left: 20px;

}

.main-header {
 background: #00096e;
 background: webkit-gradient(linear, #00096e,#0011d4);
 background: -webkit-linear-gradient(top, #00096e,#0011d4);
 background: -moz-linear-gradient(top, #00096e,#0011d4);
 background: -ms-linear-gradient(top, #00096e,#0011d4);
 background: -o-linear-gradient(#00096e,#0011d4);
 background: linear-gradient(#00096e,#0011d4);
 font-size: 2.25em;

}

.sub-header {
 background: #cfc35d;
 background: webkit-gradient(linear, #cfc35d,#e0d998);
 background: -webkit-linear-gradient(top, #cfc35d,#e0d998);
 background: -moz-linear-gradient(top, #cfc35d,#e0d998);
 background: -ms-linear-gradient(top, #cfc35d,#e0d998);
 background: -o-linear-gradient(#cfc35d,#e0d998);
 background: linear-gradient(#cfc35d,#e0d998);
 font-size: 1.5em;

}

Object Oriented CSS (OOCSS)

Sass allows for a better framework for the implementation of OOCSS. If you are unfamiliar with OOCSS, Nicole Sullivan‘s answer to writing a well structured, efficient and performant CSS; here are a few resources:

Combining Sass and OOCSS principles make for a great way to write CSS. Here are some great articles in this regard:

Conclusion

Sass is a great that will enhance and improve upon CSS. If you have any reservations about using Sass, just experiment with it especially with the SCSS extension which allows you to use regular CSS in their along side with all the features of Sass. Cheers.