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

Question

Я хочу динамически создавать миксины в 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? Я не смог найти в руководстве ничего об этом.

Answer 1

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

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

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

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

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

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

Изменить: Вы уверены, что вам нужно использовать @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

Answer 2

На данный момент (30 марта 2014 года) chriseppstein прежнему отказывается внедрять динамические миксины. Смотрите выпуск 857 и выпуск 626 на Github.

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

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

---

ОБНОВЛЕНИЕ: В 2016 году Eppstein все-таки реализовала эту функцию из-за количества запросов на нее. Однако сегодня (середина 2018 года) эти изменения все еще не объединены с основной веткой и, таким образом, остаются недоступными в выпуске sass. Смотрите выпуск 2057.

Answer 3

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

$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