Using Sass variables for style reusability

A very handy advantage of using Sass is to define commonly used values in our styles as variables so that they can be easily reused in our project's styling.

Imagine that our Angular application has a very simple two-color theme for its background and text. For our navigation, we simply want to reverse the same two colors of theme for the background and text. With Sass, we can define these colors once and then apply them to the correct properties for the objects we want to style, without copying and pasting hexadecimal color definitions around.

How to do it...

We can define two-color variables by defining them in our /src/styles.scss stylesheet:

$background-color: #585858;
$text-color: #1E1E1E;

html, body {
background-color: $background-color;
  color: $text-color;
}

nav {
  background-color: $text-color;
  color: $background-color;
}

A huge advantage with Sass variables over vanilla CSS is that we can always change the value of a variable we define...