在 Sass 中附加值

Question

我正在使用 BEM 和 Sass，使用以下

@mixin

：

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

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

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

此函数通常处理单个

modifier

（即

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;
   }
}