scss - ¿Cómo definir un mixin dinámico o nombre de función en SASS?

sass--watch

Question

Quiero crear dinámicamente mixins en SASS, nombrado después de cada elemento en la lista, pero parece que no funciona.

Intenté esto pero me sale un error:

$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

Error:

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

¿SASS no admite este uso? No pude encontrar nada en el manual al respecto.

Answer 1

La interpolación variable en @mixins no parece ser compatible actualmente.

La documentación de SASS llama a esta #{} interpolation y lo describe así :

Interpolación: # {}

También puede usar variables SassScript en selectores y nombres de propiedad usando # {} sintaxis de interpolación:

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

Según la documentación , la interpolación de nombres de variables solo parece ser compatible con selectores y nombres de propiedad, y no para @mixin s. Si desea esa característica, puede presentar un Issue para ella, aunque puede que ya esté rastreando lo que está describiendo.

Editar: ¿Estás seguro de que necesitas usar @mixin para lograr el tipo de estilo del que estás hablando? ¿Podrías usar un selector con interpolación? Por ejemplo, esto funcionarí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

La mejor solución es implementar una mezcla única que tome un argumento.

$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

Answer 3

A partir de este momento (30 de marzo de 2014), Chris Eppstein todavía se niega a implementar dynamic mixins. Vea el número 857 y el número 626 en Github.

He estado tratando de convencer a Chris de que esta característica es bastante esencial para que Sass desate su verdadero poder ... y no soy el único allí.

Si acepta que esta es una característica importante, vaya al número 857 y al número 626 y solucione este problema usted mismo. Mientras más de nosotros proporcionemos un caso de uso para esta función, es más probable que podamos convencer a Chris y / o a uno de los otros desarrolladores principales.