Css 在Sass中追加值

我正在使用以下

@mixin

与BEM和Sass合作：

@mixin modifier($modifiers...) {
  $result: '';

  @each $modifier in $modifiers {
    $result: append($result, '#{&}--#{$modifier}');
  }

  @at-root #{$result} {
    @content;
  }
}

此函数通常处理单个

修饰符

（即

foo--bar

）。但我试着去构建它，如果有一个场景，两个修饰语复合会引发一种独特的行为。这就是为什么必要时，

@mixin

可以处理多个参数的原因

问题是当我传递两个参数时，会导致意外的行为。考虑以下事项：

.foo {
  display: block;

  @include modifier('bar', 'baz') {
    display: none;
  }
}

预期输出如下：

.foo {
  display: block;
}
.foo--bar.foo--baz {
  display: none;
}

但是，当我附加项时，似乎添加了一个空格，因此

.foo--baz

实际上被视为

.foo--bar

的后代，如下例所示：

.foo {
  display: block;
}

.foo--bar .foo--baz {
  display: none;
}

如何防止

$result

在每个

append（）

之间添加空格

---

提前谢谢

我设法获得了您想要的输出，但没有使用

append（）

函数：

@mixin modifier($modifiers...) {
   $result: '';

   @each $modifier in $modifiers {
      $result: '#{$result}#{&}--#{$modifier}';
   }

   @at-root #{$result} {
      @content;
   }
}

---

这是您需要的吗？

我设法获得了您想要的输出，但没有使用

append（）

函数：

@mixin modifier($modifiers...) {
   $result: '';

   @each $modifier in $modifiers {
      $result: '#{$result}#{&}--#{$modifier}';
   }

   @at-root #{$result} {
      @content;
   }
}

---

这是你需要的吗？

比我用的黑客要简洁得多。我同意你的解决方案。谢谢；）比我用的黑客要简洁得多。我同意你的解决方案。谢谢；）