Question

在我的组件中，我想添加一个修饰符，它应该有更高的规格，所以我的输出应该是这样的：

通缉输出：

.component {
  // ...
}

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

SCSS建议：

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

但是这不起作用，我收到编译错误：格式错误＆＃34;或＆＃34;无效的CSS＆＃34;。

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

A simpler solution is to interpolate the second & by putting it into #{&}:

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

Note: The dot between the two & is not needed, because & contains it already.

An equivalent mixin related to Densys would be:

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

Usage:

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

Answer 3

＆（＆。＆）旁边有一个句点。这将产生component..component--修饰符，这是不正确的（两个句点）。您真正想要的是&&，但是sass不允许您这样做。您想要做的是逃脱第二个＆像这样：

&#{&}--modifier