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

Question

我想在 SASS 中动态创建混合，以列表中的每个元素命名，但它似乎不起作用。

我试过了，但出现错误:

$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 文档称此 #{} 插值 和 describes it like this :

Interpolation: #{}

You can also use SassScript variables in selectors and property names using #{} interpolation syntax:

$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