19

我想在 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 不支持这种用法吗？我在手册中找不到任何关于它的内容。

4

3 回答 3

28

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

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

插值：#{}

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

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

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

编辑： 您确定需要使用 a@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
于 2013-04-01T18:27:01.687 回答
19

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

我一直试图让 Chris 相信，这个功能对于 Sass 释放其真正力量非常重要……而且我不是唯一一个。

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

更新：在 2016 年，Eppstein 确实最终实现了此功能，因为它的请求数量众多。但是，今天（2018 年年中），这些更改仍未合并到主分支中，因此在 sass 版本中仍然不可用。见 问题 2057。

于 2014-03-30T00:43:32.703 回答
9

最好的解决方案是实现一个带有参数的 mixin。

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@mixin event-icon($name)
  @if not index($event-icons, $name)
    @error "#{$name} is not an event icon."
  background-position: -($event-icon-width * $i) 0
于 2015-05-08T22:45:04.063 回答