SASS/SCSS 不接受 &.&

Question

在我的组件内部，我想添加一个修饰符，它应该有更高的规格，所以我的输出应该如下所示：

想要的输出：

.component {
  // ...
}

.component.component--modifier {
  // ...
}

SCSS建议：

.component {
  // ...
  &.&--modifier {
    // ...
  }
}

但这不起作用，我收到编译错误：类似“格式错误”或“无效的 CSS”。

Answer 1

你可以定义一个mixin：

@mixin mod($n) {
  .#{$n} {
      color: blue;
  }
  .#{$n}.#{$n}--modifier {
       color: red;
  }
}
@include mod(component);

输出：

.component {
  color: blue;
}

.component.component--modifier {
  color: red;
}

但是可能有更合理的方法来解决您的实际问题，例如上

modifier

课程。

Answer 2

& (&.&) 旁边有一个句号。这将产生组件..组件--修饰符，这是不正确的（两个句点）。你真正想要的是 && 但 sass 不允许你这样做。你想要做的是逃避第二个&像这样：

&#{&}--modifier

Answer 3

一个更简单的解决方案是将第二个

插入

#{&}

：

.component {
  // ...
  &#{&}--modifier {
    // ...
  }
}

注意：两个

之间的点不是必需的，因为
&
已经包含它了。

与 Densys 相关的等效 mixin 是：

@mixin modifier($modifier) {
  &#{&}--#{$modifier} {
    @content;
  }
}

用途：

.component {
  @include modifier(breadcrumb) {
    // ...
  }
}

Answer 4

0
投票

以上答案是正确的，对我有用，谢谢