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

Answer 1

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

SASS文档会调用此#{} interpolation和describes it like this：

插值：＃{}

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

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

根据documentation，变量名称的插值似乎仅支持选择器和属性名称，而不支持@mixin。如果你想要这个功能，你可能需要file an Issue，虽然this one可能已经在追踪你所描述的内容。

修改您确定需要使用@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

Answer 2

截至目前（2014年3月30日）， Chris Eppstein 仍然拒绝实施动态混音。在Github上查看 issue 857 和 issue 626 。

我一直试图说服克里斯，这个特征对于萨斯释放其真正的力量至关重要......而且我不是那里唯一的那个。

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

更新：2016年，由于对此功能的要求，Eppstein最终实现了此功能。但是，今天（2018年中），这些更改仍然没有合并到主分支中，因此在sass版本中仍然不可用。看到 issue 2057

Answer 3

最好的解决方案是实现一个带参数的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

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

3 个答案: