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;
}

​