The Power of Sass

Sass is a powerful CSS pre-processor language. Here we look at what Sass can do and why you should be using it.

Sass, or Syntactically Awesome Stylesheets is an extremely powerful CSS pre-processor language.

Here at Enovate, we use Sass for all our web projects, as the time taken to develop with Sass, and the sheer power of the language make it a very desirable extension to CSS. We would recommend switching your project styling to Sass based development, but if you are still sitting on the fence, here are some of the best features that we feel help Sass live up to its name.

Nesting

Perhaps one of the best features of Sass is the ability to nest CSS selectors within their respective parent element. A huge pain when writing in pure CSS was that a lot of your code was repeated; for each selector you would have to re-declare all of the parent classes and ID’s before you could even begin to develop the styling.

Let's compare some basic styling for a primary navigation, and see how the same effect can be achieved in both Sass and plain CSS.

Here is what we could write in CSS:

.nav--primary {
    margin-bottom: 24px;
}
.nav--primary ul {
    margin: 0;
    padding: 0;
}
.nav--primary ul li {
    display: inline;
    margin-right: 24px;
}
.nav--primary ul li.current a {
    text-decoration: underline;
}
.nav--primary ul li a {
    color: #444;
    text-decoration: none;
}
.nav--primary ul li a:hover {
    text-decoration: underline;
}

As you can see we have a lot of repeated code; each time we have had to use the .nav--primary selector before we can begin to make our declarations. So lets see what the same code would look like when using Sass:

.nav--primary {
    margin-bottom: 24px;

    ul {
        margin: 0;
        padding: 0;

        li {
            display: inline;
            margin-right: 24px;
        }
        
        a {
            color: #444;
            text-decoration: none;

            &:hover,
            .current & {
                text-decoration: underline;
            }
        }
    }
}

We have opened (line 1) and closed (line 23) .nav--primary, so now all the styles contained within this parent will only apply to it and its child elements.

Variables

Sass is extremely useful at reducing the time it takes to style your websites, and also helps to maintain a strict consistency with your website elements. Pre-defined variables can be injected into your page, so in the event something needs to change, a site-wide update can be achieved with editing a single line of code. Think of variables as a way of storing a piece of information that can easily be changed and can be used throughout the site.

Here is a good example of a variable in use. The variable name and corresponding styles are defined:

$brand-face: "Open Sans", sans-serif;

And then used as a variable in your styling:

h1 {
    font-family: $brand-face;
}

So if we were to change the brand-face from Open Sans to another font, we would only need to change the code where the variable has been defined; long gone are the days of search and replace!

Although this is only a small example of the true power of Sass variables, it helps to demonstrate how effective using variables can be, instead of writing your declarations each and every time.

Mixins

Cross-browser compatibility is a fundamental part of all development projects, although defining browser prefixes each and every time can be a very tedious task … but not anymore. Mixins allow you to create a set of CSS declarations for all browsers, that only need to be written with one line of Sass in your stylesheet.

For this example, here is a basic mixin for defining a border radius:

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

Now, when we need to add a border radius to an element, we simply need to write:

.element {
    @include border-radius(12px);
}

And the generated CSS will look like this:

.element {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px;
}

Powerful Calculations

With Sass you are able to perform mathematical calculations right in your CSS documents. You are able to add, subtract, multiply, divide and calculate percentages. This extremely powerful feature is useful when maintaining a vertical rhythm through your site.

Here is a good example of Sass calculations in action, and how they can be used with variables. For this example, we are working on a 24px vertical rhythm, which we have defined with a $base-spacing-unit variable:

// Defining the variable
$base-spacing-unit:    24px;


header[role="banner"] {
    height: $base-spacing-unit*6;
    // This will be rendered as 144px

    padding: $base-spacing-unit/2 0;
    // This will be rendered as 12px 0

    margin-bottom: $base-spacing-unit*2;
    // This will be rendered as 48px
}

Final Thoughts

Hopefully you can see that using Sass for your next project could bring a whole new world of opportunity. Although I have barely touched the surface of what Sass can achieve, the advantages mentioned here clearly out-weigh the disadvantages of using Sass over raw CSS.

If you've been persuaded to give it a go for your next project, good! Check out the Sass site for details and documentation.

Tagged with:

You might also like… BEM Syntax for CSS