SASS Essentials 2018: 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:


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.

Returning our attention to _typography.scss in the variables folder, CONTINUE FROM HERE… TBA…

As an aside, it might make more sense to you to import the variables file before normalize. That’s fine. The main thing here is to make sure that you import your variables partial before you import any partials that refer to any of the variables. SASS will throw an error if you use a variable before declaring it.