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

Я хочу динамически создавать миксины в 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? В инструкции я ничего не нашел.

13
css css-preprocessor dynamic-function mixins sass

3 ответов

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

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

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

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

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

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

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
22

на данный момент (30 марта 2014), Крис Эпштайна Расположе по-прежнему отказывается выполнять динамические миксины. См.проблема 857 и вопрос 626 на Github.

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

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

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

14

лучшим решением является реализация одного 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
5