Sass Variables

How to use Sass variables to simplify your CSS code.

Variables can help keep things consistent throughout a website. Instead of repeating the same values across many different properties, you can simply set a variable, then refer to it whenever you need to. If you need to change the value, you only need to do it in one place.

If we look at the following Sass file, it contains two variables.

One variable is called $primary-color and the other is called $secondary-color.

Variables are like containers that store a value. In our case, we store the value orange in one variable and gold in the other.

Instead of typing out orange everytime we need to use that color, we can use the variable name instead. If we need to update a color, we only need to update it in the place that we set the variable.

Variable Syntax

Variables start with a dollar sign ($) followed by the variable name.

Variables are set like CSS properties — using a colon (:) between the variable name and the value being assigned to it.

The variable name is whatever you want to call it. You could call the variable $homer-simpson and it would still work.

Note that variables are written the same whether you use the indented syntax or the SCSS syntax.

Hyphens & Underscores

Variable names can use hyphens and underscores interchangeably. So our variable called $primary-color could be accessed using $primary_color and vice versa.

So our file could look like this and it would still work:

Nesting

Variables can also be set within a selector. Like this:

However, such variables are only available within the level of nested selectors where they’re defined. But if they’re defined outside of any nested selectors, they’re available everywhere.

So we couldn't do this:

If you tried to compile that code, you'd receive an error that reads something like this: Error: Undefined variable: "$header-color"

The !global Flag

However, the above example would work if you added the !global flag when setting the variable.

So you can do the following:

This code will be compiled to the following CSS:

Variable Values

The variable can hold any CSS value we want. We could create a variable to hold font families, font weight, border widths, background images, etc.

Here's an example of some more variables added to the Sass file.

This will result in the following CSS file:

Default Values

You can assign a default value to a variable, which will only be used if the variable doesn't have a value.

To do this, add the !default flag to the end of the assignment. Like this:

In this particular case, the compiled CSS will be as follows:

The second (default) color wasn't used in this case, because a value had already been assigned to that variable.

But if we were to remove the first line, the second (default) value would be used.

So if our SCSS file looks like this:

The compiled CSS will look like this:

Data Types

SassScript supports seven main data types:

SassScript also supports all other types of CSS property value, such as Unicode blocks and !important declarations.