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

css CSS

Green西里

2020-03-24

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

第3636篇《如何在SASS中定义动态mixin或函数名称？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Davaid飞云 2020.03.24

最好的解决方案是实现带有参数的单个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

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

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android