是否可以在SASS每个循环中动态使用变量名称？

Question

这是一个简化的例子。我想要做的是使用数组中的项来输出我之前创建的变量值。尝试通过连接'$'来创建变量的语法显然是错误的，但我正在使用它来说明我正在尝试做什么。

$puma-width: 100px;
$slug-width: 200px;

@each $animal in puma, slug {
  .#{$animal}-title {
    width: $+#{$animal}-width;
  }
}

期望的输出：

.puma-title {
   width: 100px;
}
.slug-title {
   width: 200px;
}

Answer 1

这也是我在SASS中想要的东西，但在阅读了他们的讨论列表之后，我得出结论，这种变量插值还不支持。

我没有尝试过Less，但他们的documentation表明可以使用@@ syntax。

Answer 2

另一种方法是传递一个地图而不是@each指令的项目列表。以下内容适用：

@each $animal, $width in (puma, 100px),
                         (slug, 200px) {
  .#{$animal}-title {
    width: #{$width};
  }
}