When we covered Sass's extend feature, the border colors for each class were 20% darker than their corresponding background colors. In order to find a color that is 20% darker than another, you have to do some tedious math—and if you decide to later change that percentage, it'll require more tedious math. Fortunately, Sass has built-in functions for us to do all sorts of things, including darkening and lightening colors and a whole lot more.

Now, let's revisit the Sass code we had seen in the previous Extend section, and this time write it more flexibly using variables and the built-in darken function in order to have Sass do the math for us. This way, it makes it easy to change the percentage later on if we choose to. The compiled output of the following Sass code would be the exact same as the compiled output in the previous Extend section, and so we won't repeat that here:

/* Example of using variables and a built-in function */

$active-color: green;
$active-border-color: darken($active-color,20%);
$inactive-color: yellow;
$inactive-border-color: darken($inactive-color,20%);
$terminated-color: pink;
$terminated-border-color: darken($terminated-color,20%);

%common-status-styles {
 width: 200px;
 height: 75px;
 padding: 10px;
 color: #333;
}

.active {
 @extend %common-status-styles;
 background-color: $active-color;
 border-color: $active-border-color;
}

.inactive {
 @extend %common-status-styles;
 background-color: $inactive-color;
 border-color: $inactive-border-color;
}

.terminated {
 @extend %common-status-styles;
 background-color: $terminated-color;
 border-color: $terminated-border-color;
}