Jak zdefiniować dynamiczną nazwę mixin lub funkcję w SASS?

Question

Chcę dynamicznie tworzyć mixiny w SASS, nazwane po każdej pozycji na liście, ale to nie działa.

próbowałem tego, ale pojawia się błąd:

$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 

Błąd:

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

Czy ten zwyczaj nie jest obsługiwana przez SASS? Nie znalazłem w tej instrukcji niczego.

Answer 1

Zmienna interpolacja w @mixins obecnie nie jest obsługiwana.

Dokumentacja SASS nazywa to #{} interpolation i describes it like this: interpolacja nazw zmiennych pojawia

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 na documentation tylko być obsługiwany przez selektorów i nazwy własności, a nie dla @mixin s. Jeśli chcesz skorzystać z tej funkcji, być może będziesz potrzebować jej file an Issue, chociaż może ona już śledzić to, co opisujesz.

Edit: Czy na pewno trzeba użyć @mixin osiągnąć ten rodzaj stylizacji mówisz? Czy mógłbyś użyć selektora z interpolacją? Na przykład, to będzie działać:

$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

W tej chwili (30 marca 2014), Chris Eppstein nadal odmawia wdrożenia dynamicznych wstawek. Zobacz issue 857 i issue 626 na Github.

Próbowałem przekonać Chrisa, że ​​ta funkcja jest bardzo ważna, aby Sass mógł uwolnić swoją prawdziwą moc ... i nie jestem tam jedyny.

Jeśli zgadzasz się, że jest to ważna cecha, przejdź do issue 857 i issue 626 i rozwiązać ten problem samodzielnie. Im więcej z nas zapewni przypadek użycia tej funkcji, tym większe prawdopodobieństwo, że uda nam się przekonać Chrisa i/lub jednego z głównych programistów wiodących.

Answer 3

Najlepszym rozwiązaniem jest zaimplementowanie pojedynczego mixinu, który przyjmuje 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