sass@每个包含$character

Question

嗨，我有以下scs

$outlines: "primary", "danger";
.btn-outline {
@each $outline in $outlines {
&-#{$outline}:not(:hover) {
background-color:#{$outline};
}
}
}

但是我希望css是

$outlines: "primary", "danger";
.btn-outline {
@each $outline in $outlines {
&-#{$outline}:not(:hover) {
background-color:$#{$outline};
}
}
}

从而css被输出为

.btn-outline-primary:not(:hover) {
background-color: $primary;
}
.btn-outline-danger:not(:hover) {
background-color: $danger;
}

由于$字符的原因，这是不起作用的，有没有一种方法可以转义$字符，使其输出，或者有没有其他方法可以做到这一点，也许可以使用某种映射？

提前感谢

Answer 1

您可以为此使用关联数组：

$colours: (
'primary' : $primary,
'danger' : $danger,
);

.btn-outline {
@each $name, $colour in $colours {
&-#{$name}:not(:hover) {
background-color:$colour;
}
}
}