We will put our Sass color variables in a separate Sass file called _colors.scss in the same directory as /src/styles.scss:

$primary-color: #566FC6;
$secondary-color: #222c4f;

Sass's @import command acts very similarly to vanilla CSS3's @import command; however, since Sass is precompiled, it will not cause the extra unnecessary HTTP request:

@import "colors";

button {
  background-color: $primary-color;
}

We can use our imported color variables for setting the background color property of our button elements. If we change the primary color value in /src/_colors.scss, it will update our button's background color automatically.