Variables

SASS effectively gives us a lot of the programmatic benefits of working with code, only now with the ability to apply it to stylesheets.

Over the next few lessons we’ll be diving right into the features of SASS.

First up let’s introduce variables.

Definition #

Variables are a way to store information that you want to reuse throughout your stylesheet.

They allow us to store values for colors, fonts or really any CSS value that you want to reuse!

We use the $ symbol when we wish to make something a variable.

Example #

In our SCSS, let’s define a color variable:

$color-primary: #ffff00; // Yellow

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

This will of course, set our background-color to yellow. It’s that simple!

Note: You can use single line comments in Sass with //.

When we then run our compile*, it’ll output the following CSS:

body {
  color: #ffff00;
}

This becomes extremely powerful when working on large projects!

If you wish to make a change to a colour used throughout your stylesheets, it’s much simpler to alter if the color is defined in one location as a single variable.

The alternative to changing the value of one variable defined at one location is finding and replacing every reference to the value you want to change. This is a much more tedious task, especially if you want to implement a quick change to test out a different color or font.

Next up let’s look at the nesting syntax!

*Later in the course we’ll examine this process in detail. For now it’s good to know that when we save our code into sass/main.scss, it’ll automatically compile into the css/style.css file!