Как определить динамическое имя mixin или функции в SASS?

Я хочу динамически создавать mixins в SASS, названный после каждого элемента в списке, но он не работает.

Я пробовал это, но получаю сообщение об ошибке:

$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

Ошибка:

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

Это использование не поддерживается SASS? Я не мог найти ничего в этом руководстве.

Ответ 1

Переменная интерполяция в @mixins в настоящее время не поддерживается.

Документация SASS вызывает это #{} interpolation и описывает это как это:

Интерполяция: # {}

Вы также можете использовать переменные SassScript в селекторах и именах свойств, используя синтаксис интерполяции # {}:

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

В документации интерполяция имен переменных только поддерживается для селекторов и имен свойств, а не для @mixin s. Если вам нужна эта функция, вы можете захотеть создать файл, хотя этот может уже отслеживать то, что вы описываете.

Edit: Вы уверены, что вам нужно использовать @mixin для выполнения вида стиля, о котором вы говорите? Не могли бы вы использовать селектор с интерполяцией? Например, будет ли это работать:

$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

С этого момента (30 марта 2014 года) Chris Eppstein все еще отказывается внедрять динамические микшины. См. issue 857 и вопрос 626 на Github.

Я пытался убедить Криса в том, что эта особенность очень важна для Sass, чтобы развязать свою истинную силу... и я не единственный, кто там.

Если вы согласны с тем, что это важная функция, перейдите по ссылке issue 857 и issue 626 и решить эту проблему самостоятельно. Чем больше из нас предоставит прецедент для этой функции, тем более вероятно, что мы сможем убедить Криса и/или одного из других ведущих разработчиков.

Ответ 3

Лучшим решением является реализация единственного mixin, который принимает аргумент.

$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