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

Question

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

Answer 1

@mixins中的变量插值目前似乎不受支持.

SASS文档调用它#{} interpolation并将其描述如下:

插值:#{}

您还可以使用#{}插值语法在选择器和属性名称中使用SassScript变量:

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

根据文档,变量名称的插值似乎仅支持选择器和属性名称,而不支持@mixins.如果你想要这个功能,你可能想为它提交一个问题,虽然这可能已经跟踪了你所描述的内容.

编辑: 您确定需要使用a @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

截至目前(2014年3月30日),Chris Eppstein仍然拒绝实施动态混合.请参阅Github上的问题857和问题626.

我一直试图说服克里斯,这个特征对于萨斯释放其真正的力量至关重要......我不是那里唯一的一个.

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

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

Answer 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