Style reusability with Sass variables makes you save a lot of time and confusion.

.card h1 {
  color: #278da4;
}
.btn-info {
  color: #278da4;
}
header p {
  color: #278da4;
}

Declaring

At the very top of the file, delcare variables

$color-primary: #278da4;
$color-secondary: #b13c69;
$color-accent: #eeea72;
$color-brand: #6a5acd;

$gutter: 20px;

$font-stack-primary: 'Raleway', sans-serif;
$font-stack-secondary: 'Bree Serif', serif;

Re/Using Variables

Now you can use the variable whenever necessary.

body {
  font-family: $font-stack-primary;
}
h2 {
  font-family: $font-stack-secondary;
}
.card h1 {
  color: $color-primary;
}
.btn-info {
  background-color: $color-primary;
}
header p {
  color: $color-accent;
}
.col {
  margin-left: $gutter;
}
.row {
  margin-bottom: $gutter;
}

Advantage

A great advantage is that if you want to change the theme colors of your website, you’ll only need to change each color in one spot in the file.