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

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并描述如下：

插值：＃{}

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

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

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

编辑： 确定要使用@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