Sass: CSS That Sparks Joy

SassScript, or Sass, is changing the way we style. As developers, we're always trying to find ways to increase efficiency. Rather than combing through long CSS files with seemingly no structure, Sass introduced a way of streamlining code with some very familiar syntax. It's so familiar, in fact, that you could write all CSS code in an SCSS file, and it would be completely compatible. Of course, there's no point in doing that, but the idea is that you don't have to learn an entirely new language to be able to use Sass. You can make small changes as you get more comfortable, and create more efficient code as you learn all of the tricks Sass brings with its syntactically awesome style sheets.

Sass is a preprocessor. In other words, it's an extension of CSS, but it's a format that cannot be read by the browser. Because of this, you'll need a compiler, which will take the SCSS you have written and turn it into a CSS file. If you're using VS Code, there is an extension that you can install called Live Sass Compiler. If you don't have VS Code, there are several other ways to get started at sass-lang.com.

So what's so great about Sass? For starters, let's say you have a CSS file containing all of your brilliant code, and your client wants to change the color of the text. Think about all of the different selectors where you have used this color and must now hunt down and change them all. Clearly, this is a violation of the D.R.Y. (don't repeat yourself) method. Wouldn't it be more efficient to only have to change the color in one place? With Sass, you can create variables to replace your repetitive code. Variables start with a '$' prefix like below and can then be used as the property value.

$color-primary: #8429FF

p {
    color: $color-primary;
}

You can also group things by nesting, which has a visual similarity to the nested elements you see in HTML. If you style an anchor selector in CSS, the style will affect all anchors on the page. If you want to style the anchors of the navigation bar in a different way, you can easily target the nav by nesting with Sass. Only the anchor tags in the nav will be affected by this styling. Of course, this is just one example, and you can nest other areas besides the navigation as well.

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li {
        display: inline-block;
    }
    a {
        color: $color-secondary;
        text-decoration: none;
    }
}

This is a really easy way to create separation both functionally and visually. Another way to form groups using Sass is the module system. Introduced in 2019, this isn't dissimilar from CSS in that it is possible to use multiple CSS files in one app, however, when using more than one file, CSS will have to make multiple HTTP requests as it renders your page. On the other hand, Sass modules are compiled into one big CSS file.

To denote a module, the file name must begin with an underscore. This lets the compiler know that the file is only a partial. Let's say you want to have a separate file to store the branding colors. Create a new SCSS file using the underscore prefix.

_branding.scss

In this file, you may have some variables relating to the color scheme. If you want to use any of the colors from that module in another module, load them with @use and the file name. Then reference the namespace, based on the file name when referring to the variable.

@use 'branding';

body {
    background: branding.$color-primary;
}

If the file name is particularly long, you can also shorten it using 'as'. Though the above 'branding' is not a particularly long name, we'll use it again below as an example.

@use 'branding' as brand;

body {
    background: brand.$color-primary;
}

Note that as of October 2020, Sass announced that the @import method of accessing modules is deprecated and will be soon phased out. When using @import, the modules are available globally which causes unexpected side-effects if, for example, different modules contain the same name. To utilize modules, access them with the @use method above.

Another way to create reusable styles is a mixin. Think about how many times you use code to center something. With Sass, you can write the code once and implement it in multiple areas. To use the mixin, simply add an @include and the name of the mixin where you would normally write the property.

@mixin center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

header {
    @include center();
}

Mixins can also take in parameters to make them more dynamic. Adding to the example from above, you can add a parameter and make a decision later about how to appropriately center the selector depending on its use. Notice that the parameter starts with a '$' prefix.

@mixin center($direction) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
}

header {
    @include center(column);
}

Mixins bear a resemblance to functions which are also a feature of Sass, but they differ in that functions have to return something, and they don't use @include. Let's look at a very handy trick I learned from Kevin Powell. Maybe you have been tinkering with colors and you can't decide whether you like a dark or light background but every time you change it, you have to change the color of the text for visibility. You can create a function that will handle the change for you. With Sass, you can even use conditional statements. The below example evaluates the lightness of the background color passed in and returns the appropriate value.

@function text-color($bg-color) {
    @if (lightness($bg-color) > 60) {
        @return #555;
    } @else {
        @return #fff;
    }
}

One more key feature of Sass to note is the ability to use inheritance. You can pass properties of a selector to other selectors by using @extend. Just like CSS, the file is read top to bottom, so if code is followed by a property of the same name, the bottommost code will be run.

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-align: center;
    padding: 10px;
}

h4 {
    @extend h1;
    font-weight: 400;
}

Above are just a few of the basic (or not-so-basic) features of Sass to make your code cleaner and more efficient. You can find plenty of other tips and tricks to explore at sass-lang.com.