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

是您需要的吗？

在Sass中附加值

1 个答案: