Question

我很头疼

我试过找到一个解决方案，但没有像这个问题一样。

我的代码几乎就像下面的

@mixin test(){
  &:after {
    content: 'yes';
  }
}

$selectors:();
@for $i from 1 through 3 {
  $selectors: append($selectors, 'h'+$i);
}

#{$selectors} {
  @include test;
}

我想把结果作为

h1:after, h2:after, h3:after {
    content: 'yes';
}

但我得到了

h1 h2 h3:after {
    content: 'yes';
}

Answer 1

<强> SASS

%test{
  &:after {
    content: 'yes';
  }
}

@for $i from 1 through 3 {
  h#{$i}  { @extend %test; }
}

输出CSS

h1:after, h2:after, h3:after {
  content: 'yes';
}

<强>更新

如果您想使用代码，可以这样做：

@mixin test(){
  &:after {
    content: 'yes';
  }
}

$selectors:();
@for $i from 1 through 3 {
  $selectors: append($selectors, ('h'+$i), comma);
}

#{$selectors} {
  @include test;
}

使用'，'将sass列表添加到多个选择器

1 个答案: