What is Sass and why is it worth using?

If you’re a developer, you’ve probably wondered what to do to make your code clearer and easier to build up by other developers working on this project. Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor (Sass preprocessor) that can help you keep your code DRY. I will try to introduce it to you. To start you need to know that the Sass code can be written in two ways, using:

• .sass file extension – using this extension, you don’t have to use brackets and semicolons, so the code is written faster but differs from the standard CSS record, which may be less understandable for some programmers.
• .scss file extension – this syntax is more similar to CSS, it is easier to understand but carries additional characters, which are brackets and semicolons.

Let’s put this theory into practice and see the difference between these two extensions.

SASS

header 
    width: 100%

    nav 
        margin: 0 auto

    .logo 
        position: absolute
        left: 50%
        transform: translateX(-50%)

SCSS

header {
    width: 100%;

    nav {
        margin: 0 auto;
    }

    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

Which one you decide to use depends only on you, both versions are fully compatible and in the end result in the same CSS code. Personally, I prefer to use SCSS and I will base my next examples on it.

Nesting

The use of nesting can be seen in the examples above – thanks to it you can skip the rewriting of the parent selectors, what will save your time and a lot of characters. You can compare this to building a tree structure, so you can easily find yourself in the nested code.

It is also worth mentioning the use of ‘&’ in Sass – this is extremely useful when using pseudo-classes. Using this character, you simply extend the previous selector with a string written after the ‘&’. Take a look at the example below:

SCSS

header {
    width: 100%;

    nav {
        margin: 0 auto;
        
        a {
            color: #000;
            
            &:hover {
                color: #39F;
            }
        }
    }
}

Variables

You probably know what variables are, but how can they be useful in Sass? Imagine that you are working on a new template for a client forum. What if the client would like to see how his forum looks in different colors or even on the occasion of Christmas, he wanted to change the colors of the template to red?

If you aren’t using Sass preprocessor or other ones, you can’t use variables in CSS. In this case, you would have to search for all the background color declarations in the CSS code and replace them which is time-consuming and there is a chance that some of the blocks will be omitted or the color of the element you didn’t want to change will be accidentally replaced. Among other things, in such situations and many other variables in Sass have their place. Let’s compare:

SCSS

$layoutColor: #F00; // <-- JUST CHANGE THERE

header {
    width: 100%;
    background-color: $layoutColor;
}

footer {
    width: 100%;
    background-color: $layoutColor;
}

h1 {
    position: relative;
    font-size: 2.6em;
    padding: 15px 0;

    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: 0;
        left: 0;
        background-color: $layoutColor;
    }
}

CSS

header {
    width: 100%;
    background-color: #F00; // <-- CHANGE THERE
}

footer {
    width: 100%;
    background-color: #F00; // <-- AND THERE
}

h1 {
    position: relative;
    font-size: 2.6em;
    padding: 15px 0;
}

h1::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #F00; // <-- AND ALSO THERE
}

Using variables in Sass will save you some time and nerves :).

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. In combination with the operators and the if condition, we can build useful mixins that will save us repeating the same lines of code in many places. You can simply declare them using: @mixin name($variables), then call in any place where this mixin is imported by using: @include name($variables). Creativity is on your side. Example:

SCSS

@mixin absoluteCenter($centerMode: null) {
    position: absolute;

    @if $centerMode == 'vertical' {
        top: 50%;
        transform: translateY(-50%);
    }
    @else if $centerMode == 'horizontal' {
        left: 50%;
        transform: translateX(-50%);
    }
    @else if $centerMode == null {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

header {

    .logo {
        @include absoluteCenter(horizontal);
    }
}

Partials & import

To manage your code a lot easier, don’t be afraid of splitting your scss code into files referring to a given page or element. This will make it easier to navigate through the file structure and the scss code to yourself and other developers. Let’s combine it with other functionalities mentioned above and build a mini-structure out of them.

helpers/_mixins.scss

@mixin absoluteCenter($centerMode: null) {
    position: absolute;

    @if $centerMode == 'vertical' {
        top: 50%;
        transform: translateY(-50%);
    }
    @else if $centerMode == 'horizontal' {
        left: 50%;
        transform: translateX(-50%);
    }
    @else if $centerMode == null {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

helpers/_variables.scss

$layoutColor: #00f;
$anchorColor: #000;
$anchorColorOnHover: #39F;

components/_header.scss

header {
    width: 100%;
    background-color: $layoutColor;

    nav {
        margin: 0 auto;

        a {
            color: $anchorColor;

            &:hover {
                color: $anchorColorOnHover;
            }
        }
    }

    .logo {
        @include absoluteCenter(horizontal);
    }
}

components/_footer.scss

footer {
    width: 100%;
    background-color: $layoutColor;
}

components/_headings.scss

h1 {
    position: relative;
    font-size: 2.6em;
    padding: 15px 0;

    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: 0;
        left: 0;
        background-color: $layoutColor;
    }
}

styles.scss

@import 'helpers/variables';
@import 'helpers/mixins';

@import 'components/header';
@import 'components/footer';
@import 'components/headings';

By adding underscore in front of the name of your SCSS file, you tell Sass it’s just a partial, so it won’t create a CSS file from it. If you forget to add this e.g. for the header.scss file, the compiled header.css will be created – that’s why in the example above only styles.scss doesn’t have underscore, because ultimately we want it to be compiled to styles.css which we will import on the site.

Now you can see how powerful Sass is and how it can improve your work. Imagine all the above code written in clean CSS – would it be so clear and easy to edit? At first glance it may seem difficult for you, but believe me that once you start your work with Sass you will never want to go back to writing a clean CSS code.

Take a look at the Sass guide, you’ll find there more details and functionalities such as extend or operators.