Sass 将循环变量与字符串连接以动态生成另一个变量

我正在努力使这种混合工作。。任何关于如何在运行中压缩变量名并使其得到处理的想法

$colors: purple pink;

@each $color in $colors {

  .box--#{$color} {
    background-color: #{'$ui'}-$color;
  }

}

---

在本例中，

$ui red

是一个红色变量。

不幸的是，您无法在运行时生成或引用sass单个变量。但您可以将颜色代码和名称存储在sass映射（需要sass v3.3）中，并按如下方式循环使用：

$colors: ("purple": #f7f,
          "pink":   #ffa);

@each $color-name, $color-code in $colors {
  .box--#{$color-name} {
    background-color: $color-code;
  }
}

在CSS中，您可以得到：

.box--purple {
  background-color: #f7f;
}

.box--pink {
  background-color: #ffa;
}

例如：