如何定义SASS动态混入或功能的名称?(How to define a dynamic mixin

2019-08-18 18:01发布

我想动态创建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支持? 我找不到关于它的手册中的任何内容。

Answer 1:

在@mixins变量替换似乎并不被当前支持。

该SASS文档调用此#{} interpolation和描述它像这样 :

插值:#{}

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

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

按照文件 ,变量名的插值仅出现选择器和属性名称,而不是被支持@mixin秒。 如果您想该功能,您可能希望文件中的问题吧,虽然这个可能已经跟踪你描述。

编辑:你确定你需要使用一个@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日)的, 克里斯Eppstein的仍拒绝执行动态混入。 参见问题857发出626 Github上。

我一直在试图说服克里斯,这个功能是十分必要的萨斯释放其真正的力量。而我不在那里唯一的一个。

如果你认为这是一个重要的功能,请访问发出857发出626和解决这个问题你自己。 我们更提供了此功能的使用情况下,越有可能,我们将能够说服克里斯和/或其他领先的开发商之一。


更新 :在2016年,也Eppstein的最终实现此功能,因为它的请求数。 不过,今天(2018年年中),这些变化还没有被合并到主分支,并因此留在上海社会科学院发布不可用。 参见问题2057



Answer 3:

最好的办法是实行单一混入一个需要参数。

$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


文章来源: How to define a dynamic mixin or function name in SASS?