Comment définir un nom de mixin ou de fonction dynamique dans SASS?

Je veux créer dynamiquement mixin en SASS, d'après le nom de chaque élément dans la liste, mais il ne semble pas fonctionner.

J'ai essayé ceci mais j'obtiens une erreur:

$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

Erreur:

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

Est cette utilisation non pris en charge par SASS? Je n'ai rien trouvé dans le manuel à ce sujet.

source d'informationauteur Cristian

  1. 22

    Interpolation de Variable dans @mixin ne semble pas être pris en charge actuellement.

    Le SASS documentation appelle cette #{} interpolation et décrit comme ceci:

    Interpolation: #{}

    Vous pouvez également utiliser SassScript variables dans sélecteurs et noms de propriété à l'aide de #{} interpolation syntaxe:

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

    Par la la documentationl'interpolation des noms de variable ne semble être prise en charge pour les sélecteurs et les noms de propriété, et non pas pour @mixins. Si vous souhaitez cette fonctionnalité, vous pouvez fichier un Problème pour elle, bien que cette une peut-être déjà suivi ce que vous décrivez.

    Edit:
    Êtes-vous sûr que vous devez utiliser une @mixin pour accomplir le genre de style que vous parlez? Pourriez-vous utiliser un sélecteur avec l'interpolation? Par exemple, serait-ce de travailler:

    $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
  2. 12

    En ce moment (30 Mars 2014), Chris Eppstein refuse toujours de mettre en œuvre des dynamiques mixin. Voir question 857 et question 626 sur Github.

    J'ai essayé de convaincre Chris que cette fonctionnalité est tout à fait essentiel pour Sass pour libérer sa véritable puissance... et je ne suis pas le seul là-bas.

    Si vous êtes d'accord que c'est une caractéristique importante, s'il vous plaît aller à question 857 et question 626 et résoudre ce problème vous-même. Les plus de nous fournir un cas d'utilisation de cette fonctionnalité, le plus probable que nous allons être en mesure de convaincre Chris et/ou l'un des autres développeurs.

    Mise à JOUR: En 2016, Eppstein ne finissent par la mise en œuvre de cette fonction en raison du nombre de demandes. Cependant, aujourd'hui (mi-2018), ces changements n'ont pas encore été intégrée dans la branche principale et restent donc pas disponible dans la version sass. Voir
    question 2057.

  3. 5

    La meilleure solution est de mettre en œuvre une seule mixin qui prend un argument.

    $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