Wie definiere ich einen dynamischen Mixin- oder Funktionsnamen in SASS?

Ich möchte dynamisch Mixins in SASS erstellen, die nach jedem Element in der Liste benannt sind, aber es scheint nicht zu funktionieren.

Ich habe das versucht, aber ich bekomme eine Fehlermeldung:

$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

Fehler:

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

Wird diese Verwendung von SASS nicht unterstützt? Im Handbuch habe ich dazu nichts gefunden.

Variableninterpolation in @mixins scheint derzeit nicht unterstützt zu werden.

Die SASS-Dokumentation nennt dies #{} interpolation und beschreibt es so:

Interpolation: #{}

Sie können auch SassScript-Variablen in verwenden Selektoren und Eigenschaftsnamen mit #{} Interpolationssyntax:

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

Pro die Dokumentationscheint die Interpolation von Variablennamen nur für Selektoren und Eigenschaftsnamen unterstützt zu werden und nicht für @mixins. Wenn Sie diese Funktion möchten, können Sie dies tun ein Problem melden dafür aber Dieses hier verfolgen möglicherweise bereits, was Sie beschreiben.

Bearbeiten:
Sind Sie sicher, dass Sie eine verwenden müssen @mixin um die Art von Styling zu erreichen, von der Sie sprechen? Könnten Sie einfach einen Selektor mit Interpolation verwenden? Würde das z.B. funktionieren:

$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