Come definire un mixin dinamico o un nome di funzione in SASS?

Question

Voglio creare dinamicamente i mix in SASS, chiamati dopo ogni elemento nell'elenco, ma non sembra funzionare.

Ho provato questo ma ho un errore:

$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 

Errore:

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

È questo utilizzo non supportato dal SASS? Non ho trovato nulla nel manuale a riguardo.

Answer 1

L'interpolazione variabile in @mixins non sembra essere supportata al momento.

La documentazione SASS chiama questo #{} interpolation e 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; 
} 

Per il documentation, interpolazione dei nomi delle variabili appare solo per essere supportato per selettori e nomi di proprietà, e non per @mixin s. Se desideri questa funzione, potresti provare a utilizzare file an Issue, sebbene lo this one stia già monitorando ciò che stai descrivendo.

Edit: Sei sicuro è necessario utilizzare un @mixin per realizzare il tipo di styling stai parlando? Potresti semplicemente usare un selettore con interpolazione? Ad esempio, sarebbe questo lavoro:

$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 

Answer 2

partire da questo momento (30 marzo 2014), Chris Eppstein rifiuta ancora di implementare mixins dinamici. Vedi issue 857 e issue 626 su Github.

Ho cercato di convincere Chris che questa funzione è assolutamente essenziale per Sass per scatenare il suo vero potere ... e io non sono l'unico lì.

Se siete d'accordo che questa è una caratteristica importante, vai alla issue 857 e issue 626 e affrontare questo problema da soli. Più di noi forniscono un caso d'uso per questa funzione, più è probabile che saremo in grado di convincere Chris e/o uno degli altri sviluppatori principali.

Answer 3

La soluzione migliore consiste nell'implementare un singolo mixin che accetta un argomento.

$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