In the remainder of this section, you will learn how to use Sass, which at the time of writing (spring 2020) is the most widely used CSS preprocessor. Sass has two syntaxes: the older Sass syntax and the newer SCSS syntax. Here we will use the SCSS syntax.

As shown in Figure 7.43, your interaction with Sass is typically via a CLI (command-line interface) tool. The tool is usually referred to as a Sass compiler, since it compiles (that is, converts) one or more Sass file(s) into a regular CSS file that can be referenced in the usual way via the <link> element. Since switching to a command/terminal window and running the compiler after every save is an extra step for the developer, you can instead tell Sass to “watch” a folder or file for any changes. When the source file(s) change, Sass will automatically compile and generate the CSS for you.

Figure 7.43 How Sass works

Figure 7.43 also shows two alternatives to using the command line approach: either using a GUI tool such as Koala, or using a code playground such as CodePen which can automatically convert your Sass into the appropriate CSS. For real-world projects, you will almost certainly make use of the CLI approach, but for learning Sass, the other two are perhaps a bit easier.

$primary-color: #647ACB;
$spacing: 20px;
.box {
  background-color: $primary-color;
  margin-top: $spacing;
}

.container { ... }
.container .sidebar { ... }
.container .sidebar h2 { ... }
.container main { ... }
.container main header { ... }
.container main header h2 { ... }
.container main article { ... }
.container main article h2 {

.container {
  .sidebar {
     $side-color : red;
     color: $side-color;
     h2 {
        color: $side-color; /* .sidebar h2 color is red */
        ...
     }
  }
  main {
     ...
     $main-color: black;
     header {
        h2 {
            color: $main-color; /* .sidebar main h2 color is black */
       }
       ...
     }
     article {
         h2 {
            color: $main-color;
            ...
         }
     }
  }
}

One of the key limitations of CSS is that even though there is often a lot of repetitive styling, outside the recent CSS variables there is no language feature for eliminating it. Mixins in Sass provide that capability. They are like a function that returns a style.

Throughout this chapter and its associated lab exercises, we have found ourselves creating and recreating the styling for boxes and cards. We could generalize out that styling into a mixin and then use it as shown in Figure 7.44.

Figure 7.44 Using mixins

Sass also provides a range of additional functions that expand the capabilities of CSS. Back in Chapter 6, you learned that a site design often needs five to nine variations of a single color, and that using the HSL model was a powerful way of determining these variations. You could use a specialized tool to get these HSL variations; alternately, you could simply make use of the Sass scale-color() function, as shown in the following.

$primary-base-color: #E12D39;
$primary-color-1: scale-color($primary-base-color, $lightness: 20%);
$primary-color-2: scale-color($primary-base-color, $lightness: 10%);
$primary-color-3: $primary-base-color;
$primary-color-4: scale-color($primary-base-color, $lightness: -10%);
$primary-color-5: scale-color($primary-base-color, $lightness: -20%);

We don’t have space in this already long chapter to fully explore Sass, which also includes features such as conditionals, iteration, and even inheritance. While you might not ever need these advanced features, one key functionality that should be mentioned is its ability to split up large CSS files into more manageable smaller files using the @import or @use rule. This a is a key functionality that is part of most real-world uses of Sass.

You could, for instance, put the Sass rules (i.e., variables, mixins, and style defintions) for global layout in a file named layout.scss, typographical rules in a file named types.scss, and rules for common components (e.g., menu, card, form elements) in a file named components.scss, and then any Sass page that need to use them can import them, as shown in the following.

/* this is at top of home.scss */
@import "layout";
@import "types";
@import "components";

/* this is at top of aboutus.scss */
@import "layout";
@import "types";
@import "components";