Let’s Learn SASS & SCSS: Variables and Nesting (Part 3)

If you’re reading this post, there’s a chance you’ve already stumbled upon part 1(getting started) and part 2 (setting up a build). If you haven’t, checking them out gives this post additional context!

Now that we’re starting to learn SASS, it’s natural to dive into the functionality that’s easiest to implement out of the gate. Don’t be fooled by its simplicity, these features are incredibly useful for your development workflow right off the bat. Not only that, they are fundamental features that more advanced features build off of.

Variables give you the ability to define a single value and reference it in multiple places. This allows you to create a file with unified values such as colors, line heights, typography, etc. Nesting is simply an organizational feature that makes visualizing messy CSS much more intuitive. It makes more sense once we dive into some examples, so let’s get to it!

How do SCSS variables work?

Variables work like defining basic variables in most other programming languages. You define them in one place and can reference them multiple times throughout your code. Here’s how you declare variables:

$grey-medium: #767676;
$grey-light: #efefef;
$deep-blue: #102039;

.button.deep-blue {
    color: $deep-blue;
}

.container.grey-light {
    background-color: $grey-light;
}

The variable $grey-light points to the #efefef HEX value. Now, $grey-light can be referenced throughout the entirety of the app. The beauty of this is, even if you reference $grey-light 5 or 500 times, you only have to change the value in one place. If your color scheme changes and calls for a different grey, you change that one value that’s defined at the top. Pretty neat huh?

You can probably already see the potential for this. In a typical website, there can be anywhere from 10-50+ global SCSS variables that define color scheme, font sizes, and other values that are meant to be consistent.

How to Use SCSS Variables

SCSS gives you so much freedom that there’s no real limit to how you can structure a website with variables. I usually make a single _variables.scss file with all of my defined options. If it gets more complex, you can split them into multiple files. Here’s what a single variables file would look like:

// Headers
$header1: 3.75em;
$header2: 3em;
$header3: 2.25em;
$header4: 2em;
$header5: 1.5em;
$header6: 1.125em;

// Section spacers
$spacer-tiny: 15px;
$spacer-small: 30px;
$spacer-medium: 50px;
$spacer-medium-plus: 65px;
$spacer-large: 75px;
$spacer-larger: 100px;
$spacer-ex-large: 160px;

// Line heights
$LINE-HEIGHT-SMALLER: 1.25;
$LINE-HEIGHT-SMALL: 1.35;
$LINE-HEIGHT-MEDIUM: 1.63;
$LINE-HEIGHT-LARGE: 1.8;

// Breakpoints
$tiny: 425px;
$mobile: 767px;
$mobile-plus: 900px;
$tablet: 1024px;
$laptop: 1200px;
$laptop-plus: 1400px;
$desktop: 1800px;

This is a fairly simple example, but it shows the real power of what variables can do. The spacers section defines common values for making margin/padding spacers on HTML sections. Breakpoints are for hooking up media queries, and line heights create unified values for various text elements. The trend here is consistency.

It’s easy for something like line heights to get scattered everywhere throughout the website. Now you can define a few values and reference them in any element. Same goes for anything else you can think of. I’ve done the same thing for font values, other text sizes, and animation durations. Do whatever is useful to you!

In bigger projects, I tend to split variable files into a “config” setup. It would look something like this:

variables
    main.scss - contains all of the imports for the below files
    _general.scss - general variables that don't fit into a specific file
    _breakpoints.scss - media query breakpoints
    _colors.scss - and so on
    ...

Now Let’s Learn Nesting

Overall, SCSS nesting is very easy to pick up. You’ve likely already seen it in some examples. When you want to group similar selectors together, you do something like this:

.container {
    background: $light-grey;

    .selector1 {
        display: flex;
    }

    .selector2 {
        display: inline-block;

            .button {
                border-radius: 3px;
            }
    }
}

.selector1, .selector2 are nested under the parent container. .button is nested under .selector2, which is nested under the parent container. It’s easy to see what’s going on when looking at the compiled css code:

.container {
    background: #efefef;
}

.container .selector1 {
    display: flex;
}

.container .selector2 .button {
    border-radius: 3px;
}

Now, it’s nice and easy to see what element goes under what. The compiled code isn’t much different, but it starts to make a difference when there’s thousands of lines nested throughout the code.

Advanced Nesting

As you already know, there’s more you can do with CSS selectors. You can select a class that also has another class: .selector.focus. You can select classes with pseudo elements and hover states: .selector::after. How do we handle this when nesting them? Easy!

.selector {
    border-color: 3px solid transparent;

    &.focused {
        border-radius: 3px;
        border-color: $black;
    }

    .button {
        &:hover {
            background-color: $black;
            color: $white;
        }
    }
}

There’s two different things we’re doing here. We’re selecting a class that also contains another class: .selector.focused. We’re also manipulating the .button element’s hover state. To add the .focused nested class, all we added was the & character. Same goes for the hover state. Adding this character appends whatever you put after it to the parent selector.

Our two advanced selectors from above are: .selector.focused and .button:hover. Not too advanced after all! These kinds of selectors are very common with BEM type architectures. You are surely bound to run into something that uses nesting and BEM.

Nesting With BEM

If you don’t know what BEM is, it’s not a technology or anything like that. It’s simply a CSS/SCSS naming convention used on many sites out there. Here’s how it might look like with SCSS.

<section class="home-banner">
    <div class="home-banner__right-column">
        <button class="home-banner__button">Click Me</button>
    </div>

    <div class="home-banner__left-column">
        <button class="home-banner__button--alt">No, Click Me</button>
    </div>
</section>
.home-banner {
    // styles here

    &__right-column {
        // styles here
    }

    &__left-column {
        // styles here
    }

    &__button {
        // styles here

            &--alt {
                // styles here
            }
    }
}

As you can see, nice and tidy! As you learn SCSS, you’ll find more and more ways to organize what used to be chaotic CSS code.

Read more about BEM here

That’s About It!

As far as variables and nesting go, that should be everything you need to get started. Nesting and variables have a lot to offer, but learning SCSS gives you so much more potential as a developer. I’m happy to dive into the more advanced features in the coming sections! Up next, we will be learning about SCSS extends and how you can use them in your next project.

Comments