How To Add Some SASS To Your Site

5 Laura Robson

What is SASS?

If you’re involved in managing or building websites, you probably will have heard of SASS by now. And if you haven’t, where have you been?

Described as ‘the most mature, stable, and powerful professional grade CSS extension language in the world’, SASS is fast becoming one of the most popular programming languages to use when writing the styling of a website.

It looks very similar to CSS with some very key differences that make SASS so much more powerful and maintainable.

Developer

Setting Variables

When building a website you would generally have a small selection of colours that you’ll use throughout to maintain continuity. This means that in your CSS you would have the same colour repeated in multiple places as follows:

.tree {
    height: 200px;
    color: #22cc00;
}
.bush {
    height: 100px;
    color: # 22cc00;
}

This is frustrating when you want to change a colour because you have to search through the whole CSS file and change it in so many places.

With SASS however, you simply have to set up a variable and when you need to change it, you only have to change it in one place.

$green : #22cc00;
.tree {
    height: 200px;
    color: $green;
}
.bush {
    height: 100px;
    color: $green;
}

Nesting Attributes

Often when you write CSS you’ll need to write long selectors to be able to select an element on the page. This can mean lots of repeatative code and can make items difficult to find and change.

.country {
    font-size: 1.6em;
}
.country .city {
    font-size: 1.4em;
}
.country .city .town {
    font-size: 1.2em;
}
.country .city .town .village {
    font-size: 1em;
}

With SASS you can nest items so that don’t have to repeat the selectors so much!

.country {
    font-size: 1.6em;
    .city {
        font-size: 1.4em;
        .town {
            font-size: 1.2em;
            .village {
                font-size: 1em;
            }
        }
    }
}

Whilst this doesn’t actually reduce the number of lines used to write this code, it does make it easier to maintain and help the developer to understand how certain properties are related.

Importing Files

With CSS you usually write all of your styling into one file and include that file in the HTML header alongside any other CSS files from extensions you might be using. This often makes for a very large file, and a lot of scrolling to find certain selectors.

Fortunately SASS has a solution for this. SASS allows you to import SASS files into other SASS files. This allows you to break down your styles by page or component, making them easier to maintain and extend.

The following code will import the _buttons.scss file into your current SASS file.

@import ‘buttons’;

It is common to write all of your SASS in separate component files, and have one master file (app.scss for example) where you import all of your separate component files.

Using Mixins

I don’t know about you, but one of the most annoying things about writing CSS for me is all the compatibility properties you need to use. Mixins to the rescue!
Mixins are basically functions that insert batches of properties for you, allowing you to avoid all of the repetition.

For example, below you can see that you write the mixin function once, and then use it throughout your code without having to repeat.

@mixin box-shadow($horizontal, $vertical, $blur, $spread, $color) {
    -webkit-box-shadow: $horizontal $vertical $blur $spread $color;
    -moz-box-shadow: $horizontal $vertical $blur $spread $color;
    box-shadow: $horizontal $vertical $blur $spread $color;
}

.box {
    height: 100px;
    @include box-shadow(3px, 3px, 4px, 4px, #ccc);
}

.big-box {
    height: 200px;
    @include box-shadow(3px, 3px, 4px, 4px, #ccc);
}

Inheriting Properties

Say you’re designing an alert component and you want them to be different colour depending on the level of alert. In CSS, you’d have to either repeat properties, or create extra CSS classes to cover the issue.

.alert {
    width: 200px;
    border: 1px solid #ccc;
    color: #000;
}

.error {
    border-color: #f00;
    color: #fbc;
}

<div class="alert error">Error!</div>

With SASS you can use inheritance to copy properties into other rules without having to assign more classes to your elements. Notice in the example below that the ‘alert’ class no longer needs to be added to the DIV.

.alert {
    width: 200px;
    border: 1px solid #ccc;
    color: #000;
}

.error {
    @extend .alert;
    border-color: #f00;
    color: #fbc;
}

<div class="error">Error!</div>

Compiling SASS

As SASS is not yet natively usable in the browser, and is simply an extension language of CSS, your SASS files must be compiled into CSS before they can be used.

To do this you can use a tool such as Gulp (http://gulpjs.com/) or Grunt (http://gruntjs.com/) which make the whole process very simple to do. You can even install a ‘watch’ module that watches for you to edit a SASS file and immediately re-compiles the code for you.