是否可以在 SASS 每个循环中动态使用变量名？ [复制]答案

【问题标题】：Is it possible to use variable names dynamically in SASS each loop? [duplicate]是否可以在 SASS 每个循环中动态使用变量名？ [复制]
【发布时间】：2011-11-04 18:14:26
【问题描述】：

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

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

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

期望的输出：

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

【问题讨论】：

标签： variables sass each

【解决方案1】：

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

我没有尝试过 Less，但他们的 documentation 建议使用 @@ 语法。

【讨论】：

【解决方案2】：

另一种方法是为@each 指令传递一个映射而不是项目列表。以下将起作用：

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

【讨论】：