9.3 Sass variables

One of the first reasons people turn to Sass is the existence of CSS variables.

Have you ever had to search and replace many occurrences of the same CSS value? If so, variables will help you out.

Syntax

You need to prepend a variable with a $ dollar sign:

$yellow: #fce473;

This line doesn’t do anything apart from defining a variable, in our case a shade of yellow:

We can then use it throughout our CSS, whenever a color unit is required:

.quote{ border-left: 5px solid $yellow;}

This .scss file will be compiled into a .css file, where all variables will be replaced with their actual value:

.quote{ border-left: 5px solid #fce473;}

Why is it called a variable? Well here, the value #fce473 is variable. Meaning the name $yellow remains fixed but the value can change.

Set your variable only once

To illustrate the purpose of using variables, you need to use it more than once, like this pink shade:

$pink: #ff1493;
.quote{ border-left: 5px solid $pink;}
.button{ background: $pink;}
.sidebar a:hover{ border-bottom-color: $pink;}
.footer a{ color: $pink;}

This will be compiled into:

.quote{ border-left: 5px solid #ff1493;}
.button{ background: #ff1493;}
.sidebar a:hover{ border-bottom-color: #ff1493;}
.footer a{ color: #ff1493;}

If you decided to go for a different shade of pink:

You’d only have to change the color value once:

$pink: #c71585;

And the resulting CSS would be automatically updated:

.quote{ border-left: 5px solid #c71585;}
.button{ background: #c71585;}
.sidebar a:hover{ border-bottom-color: #c71585;}
.footer a{ color: #c71585;}

Even more abstraction

Now let’s say you actually don’t want to use pink as your primary color, but green!

You’d have to define a $green: #32cd32; variable and replace all the instances of $pink with $green in your SCSS.

There is a better way:

// Defining color values
$yellow: #fce473;
$pink: #c71585;
$green: #32cd32;
$blue: #1d90ff;

// Defining color types
$primary-color: $green;

.quote{ border-left: 5px solid $primary-color;}
.button{ background: $primary-color;}
.sidebar a:hover{ border-bottom-color: $primary-color;}
.footer a{ color: $primary-color;}

Instead of directly referencing the variable $green, you define a primary color variable that is set to $green.

When you think about it, you don’t really want to use $green throughout your CSS. What you actually want is use your primary color, which happens to be green.

If you decided to use $blue as your primary color, you’d only have to modify a single line.

For any type of value

We’ve used variables to define colors, but you can set any type of content:

// Colors
$yellow:              #fce473;
$pink:                #c71585;
$green:               #32cd32;
$blue:                #1d90ff;

$primary-color:       $blue;
$secondary-color:     $yellow;

// Fonts
$serif:               "Lora", "Playfair Display", Georgia, serif;
$sans-serif:          "Roboto", "Source Sans Pro", "Open Sans", Arial, sans-serif;
$monospace:           "Inconsolata", monospace;

$primary-font:        $sans-serif;
$secondary-font:      $serif;

// Spacing
$mobile-space:        10px;
$desktop-space:       35px;