css - 在 Sass 中 append 一个值

Question

我正在使用 BEM 和 Sass，使用以下 @mixin:

@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() 之间添加空格？

提前致谢!

Answer 1

我设法获得了你想要的输出，但没有使用 append() 函数:

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

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

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

这是你需要的吗？