SASS Essentials 2018: Variables

Variables

[Continued from SASS Essentials: Partials]

You will notice the above pattern repeated if you look into the VARIABLES folder. The _variables.scss file imports the following partials:

_borders.scss
_colors.scss
_layout.scss
_typography.scss

Then, if you look in the main style.scss file, you will see the _variables.scss file being imported next.

 

Variables allow us to store information in one place and then use it elsewhere in our code.

If you look in _colors.scss, for example, you’ll see a number of color variables (chosen at random, in case you’re wondering).

$color__header-footer-bg: #fadd23;
$color__header-footer-links: #889cad;
$color__header-footer-links-hover: pink;
$color__header-footer-links-visited: orange;

$color__header-footer-headings: yellow;
$color__header-footer-text: papayawhip;

$color__form-labels-text: red;
$color__form-labels-bg: blue;

$color__text-headings: black;
$color__text-body-copy: #333;

$color__accent_dark: hsl(240, 30%, 40%);
$color__accent_light: hsl(240, 30%, 80%);

$color__rich-black: hsl(240, 50%, 15%);

In later partials, we can use those variable names to specify colors.

.site-header, .site-footer {
background-color: $color__header-footer-bg;
}

If you look in _typography.scss in the variables folder, you will see font stacks defined as $font__sans and $font__body-copy. In later partials, we can then use the variable name instead of repeating the actual font names.

The advantage of this and other variables is that if we change the value of the variable, we change all of the instances of its usage. So instead of having to find every color specification in a single CSS file, we can set it in one place.

SYNTAX: Variable names must start with a dollar sign.

Because they’re so useful, variables are used a lot in sass, so it is very good idea to adopt a consistent naming scheme for them.