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

我想在SASS中动态创建mixins，以列表中的每个项目命名，但似乎不起作用。如何在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？我在手册中找不到关于它的任何内容。

来源

2013-04-01 Cristian

你确定在这种情况下你需要使用'@ mixin'吗？在 –

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

的SASS文件调用此#{} interpolation和describes it like this：

Interpolation: #{}

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

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

每documentation，变量名的插值仅出现选择器和属性名得到支持，而不是为@mixin秒。如果您需要该功能，您可能需要file an Issue，但this one可能已经在跟踪您所描述的内容。

编辑： 您确实需要使用@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

来源

2013-04-01 18:27:01

以下看到我的回答我实际上已经结束了使用选择器，但这不适用于所有情况。我想独立于选择器，并且可以很容易地在其他地方使用mixins，也可以使用伪选择器，例如：悬停在链接上（将图标包裹）。 – Cristian

由于这一刻（2014年3月30日）的，Chris Eppstein仍拒绝执行动态混入。在Github上参见issue 857和issue 626。

我一直在试图说服克里斯，这个功能对Sass来说是非常重要的，可以释放它的真正力量......而且我并不是唯一的那个。

如果你认为这是一个重要的功能，请到issue 857和issue 626和解决自己这个问题。我们越多的人提供这个功能的用例，我们就越有可能说服克里斯和/或其他主要开发人员之一。

来源

2014-03-30 00:43:32

+1正如我在线程中所说的那样，这是一个很好的功能 - 我实际上需要它。只要Sass功能冻结完成，我们就可以开始工作。我不知道你为什么试图游说我们已经同意的功能是一个好主意。相反，也许在拉请求上工作，以便尽快完成？ – chriseppstein

@chriseppstein我很害怕Ruby，我不太流利。我更喜欢PHP/MySQL，HTML/CSS/JS和XML/Json类的人。无论如何，你会注意到这个答案发布于2014年3月30日。那时候，你仍然不愿意添加这个功能。我很高兴你改变了主意。也许我的游说最终得到了回报？！？ ;-) –

其实你是对的。我还没有确信mixin的动态定义是一个好主意。但是，您链接的问题是使用动态名称包含混音。我是为了什么。 OP的问题可以通过接受单个mixin的参数来解决，而不是为每个图标定义一个唯一的mixin。 – chriseppstein

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

来源

2015-05-08 22:45:04 chriseppstein

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

回答

相关问题