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

Lesezeit: 2 Minuten

Benutzer-Avatar
Christian

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.

  • Sind Sie sicher, dass Sie eine verwenden müssen @mixin in dieser Situation? Siehe meine Antwort unten

    – Stuart M

    1. April 2013 um 19:39 Uhr

Benutzer-Avatar
Stuart M

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

  • Am Ende habe ich tatsächlich einen Selektor verwendet, aber das funktioniert nicht in allen Situationen. Ich möchte unabhängig von Selektoren sein und Mixins haben, die leicht an anderen Stellen verwendet werden können, auch mit Pseudo-Selektoren wie :hover on links (die das Symbol umschließen).

    – Christian

    4. April 2013 um 14:28 Uhr

  • Es ist besser zu verwenden through in diesem Fall in der For-Schleife-Deklaration. Andernfalls ist das letzte Element (launch) werden nicht gezählt.

    – Matt McCarthy

    26. Juli 2020 um 18:44 Uhr

1006030cookie-checkWie definiere ich einen dynamischen Mixin- oder Funktionsnamen in SASS?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy