Variables

Variables are defined in _settings.scss. A few common variables are breakpoints, color, z-index and spacing, but other variables are available.

Example use

When using a color more than once, store it in a variable with a meaningful name representing the color.

// The variable is set within the .setting.scss file then used 
//across the .scss files.
// This allows you to update the whole code base just by editing 
//one instance, in this example $blue.

$blue: #2274b4;

.class {
    color: $blue;
}

.class-2 {
    border-color: $blue;
}

.class- {
    background-color: $blue;
}