Sass інтерполювати ім'я змінної для string-sass, інтерполяції, mixins

Нам надали низку кольорів із специфічними кольорами, що пов’язані з наведенням:

$red: #cb333b;
$red-hover: #fe666e;
$brown: #544742;
$brown-hover: #877a75;
etc.

Оскільки всі кольори відформатовані однаково, тож я сподівався написати міксин, який приймає назву змінної кольору, а потім з'єднає -hover до кінця. Це моя перша спроба:

@mixin button_colorizor($color) {
border-color: $color;
color: $color;
&:hover {
color: #{$color}-hover;
border-color: #{$color}-hover;
}
}

Але для цього виводиться такий колір: #f1735f-hover. Те саме, що я роблю це: color: #{$color+-hover};

Відповіді:

Ви можете створити карту кольорів. І отримуйте значення кольорів за його назвами.

Демонстрація на sassmeister.

$colors: (
red: #cb333b,
red-hover: #fe666e,
brown: #544742,
brown-hover: #877a75
);

@mixin button_colorizor($color) {
color: map-get($colors, $color);
border-color: map-get($colors, $color);

&:hover {
color: map-get($colors, $color + "-hover");
border-color: map-get($colors, $color + "-hover");
}
}

a {
@include button_colorizor(red);
}

span {
@include button_colorizor(brown);
}

Цей код компілюється в css:

a {
color: #cb333b;
border-color: #cb333b;
}
a:hover {
color: #fe666e;
border-color: #fe666e;
}

span {
color: #544742;
border-color: #544742;
}
span:hover {
color: #877a75;
border-color: #877a75;
}