如何在SASS中定义动态mixin或函数名称? [英] How to define a dynamic mixin or function name in SASS?

问题描述

我想在SASS中动态创建混合表，以列表中的每个项目命名，但是似乎不起作用.

I want to dynamically create mixins in SASS, named after each item in the list, but it doesn't seem to work.

我尝试了此操作，但出现错误:

I tried this but I get an error:

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

Is this usage not supported by SASS? I couldn't find anything in the manual about it.

推荐答案

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

SASS文档将其称为#{} interpolation，并以此描述:

The SASS documentation calls this #{} interpolation and describes it like this:

插值:#{}

Interpolation: #{}

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

You can also use SassScript variables in selectors and property names using #{} interpolation syntax:

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

根据文档，仅出现变量名称的插值选择器和属性名称而不是@mixin受支持.如果您希望使用该功能，则可以为其提交问题，尽管此可能已经在跟踪您所描述的内容.

Per the documentation, interpolation of variable names only appears to be supported for selectors and property names, and not for @mixins. If you'd like that feature, you may want to file an Issue for it, although this one may already be tracking what you're describing.

修改: 您确定需要使用@mixin来完成您正在谈论的样式吗?您可以仅使用带有插值的选择器吗?例如，这可以工作吗?

Are you sure you need to use a @mixin to accomplish the kind of styling you're talking about? Could you just use a selector with interpolation? For example, would this work:

$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

这篇关于如何在SASS中定义动态mixin或函数名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！