如何在SASS中定义动态mixin或函数名称?

我想在SASS中动态创建mixins,以列表中的每个项目命名,但是似乎不起作用。

我尝试了这个,但出现错误:

$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不支持此用法吗?我在手册中找不到关于它的任何内容。

Davaid飞云2020/03/24 18:16:57

最好的解决方案是实现带有参数的单个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
斯丁前端2020/03/24 18:16:57

截至目前(2014年3月30日),Chris Eppstein仍然拒绝实现动态混合。请参阅有关Github的第857期第626期

我一直在试图说服克里斯,此功能对于释放Sass的真正力量至关重要,而我并不是那里唯一的人。

如果您同意这是一项重要功能,请转到问题857626,并亲自解决此问题。我们中提供此功能用例的人越多,我们越有可能说服Chris和/或其他主要开发人员之一。


更新:由于对它的请求数量众多,Eppstein在2016年最终实现了该功能。但是,今天(2018年中),这些更改仍未合并到主分支中,因此在sass版本中仍然不可用。参见 问题2057