css - 带有变量名的 sass 插值

Question

我有这样的代码。有没有办法通过列表或类似的循环来重构它？

.box-heading_orange
    background-color: g.$orange

.box-heading_teal
    background-color: g.$teal

.box-heading_dark-teal
    background-color: g.$dark-teal

.box-heading_light-blue
    background-color: g.$light-blue

.box-heading_dark-blue
    background-color: g.$dark-blue

.box-heading_dark-gray
    background-color: g.$darker-gray

插值似乎非常适合这里，但我无法插入 sass 变量名称。或者我可以吗？

Answer 1

用 sass 动态引用变量是不可能的。在您的情况下，您可以简单地使用地图和@each循环：

$colors: (orange: g.$orange, teal: g.$teal, dark-teal: g.$dark-teal, ...)

@each $colorName, $color in $colors
    .box-heading_#{$colorName}
        background-color: $color