如何在 SASS 中定义动态混合或函数名称？

Question

我想在 SASS 中动态创建 mixins，以列表中的每个项目命名，但它似乎不起作用。

我试过了，但出现错误：

 $event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@each $event-icon in $event-icons
  @mixin event-icon-#{$event-icon}
    background-position: -($event-icon-width * $i) 0

错误：

 Invalid CSS after "": expected expression (e.g. 1px, bold), was "#{$event-icon}"

SASS 不支持这种用法吗？我在手册中找不到任何关于它的内容。

原文由 Cristian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

目前似乎不支持@mixins 中的变量插值。

SASS 文档调用这个 #{} interpolation 并 这样描述它：

插值：#{}

您还可以使用 #{} 插值语法在 选择器 和 属性名称 中使用 SassScript 变量：

 $name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

根据 文档，变量名称的插值似乎只支持选择器和属性名称，而不支持 @mixin s。如果您喜欢该功能，您可能需要为其 提交一个问题，尽管 这个问题 可能已经在跟踪您所描述的内容。

编辑： 你确定你需要使用 @mixin 来完成你正在谈论的那种样式吗？您可以只使用带插值的选择器吗？例如，这会起作用吗：

 $event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@for $i from 1 to length($event-icons)
  $event-icon: nth($event-icons, $i)
  .event-icon-#{$event-icon}
    background-position: -($event-icon-width * $i) 0

原文由 Stuart M 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

截至目前（2014 年 3 月 30 日）， Chris Eppstein 仍然拒绝实施动态混合。请参阅 Github 上的 问题 857 和 问题 626 。

我一直试图说服 Chris，这个特性对于 Sass 释放其真正的力量来说是非常重要的……而且我不是唯一一个在那里的人。

如果你同意这是一个重要的特性，请到 issue 857 和 issue 626 自己解决这个问题。我们中越多的人为此功能提供用例，我们就越有可能说服 Chris 和/或其他主要开发人员之一。

---

更新：在 2016 年，Eppstein 由于请求的数量而最终实现了这个功能。然而，今天（2018 年年中），这些更改仍未合并到主分支中，因此在 sass 版本中仍然不可用。请参阅 第 2057 期。

原文由 John Slegers 发布，翻译遵循 CC BY-SA 4.0 许可协议