Let's say I created a suitable color palette. What would be the best way to make sure the colors are used consistently? – Giving it names like primary_700 or accent_1_700 seems a bit too technical.
$accent_1_700: #e60000;
$accent_2_900: #ff9999;
@mixin button_border($color) {
border: 1px solid $color;
}
.alert-button {
background-color: $accent_2_900;
@include button_border($accent_1_700);
}
This makes your color palette defined explicitly and easy to change in one place, and makes which color on the palette you're using in a given context defined explicitly as well.