SCSS如何编写CSS样式适用于媒体打印和特定案例

我有一个特殊情况，我的样式需要同时应用于印刷媒体，当

有一个特殊的类要检测时，我们就称这个类为

。它是pdf模式

在我的SCS中，我尝试使用

@content

来避免重复CSS，但不知何故，生成的CSS没有为

案例生成正确的选择器，我无法在这个混音中使用

&

选择器。到目前为止，这是我的尝试

SCSS：

HTML:

显然，这会起作用，但在我的实际项目中，我们采用了在选择器内部使用@include mixin。通过应用这个策略，它意味着重新编写大量选择器，所以我认为这将是我在没有其他选择时的最后手段

---

谢谢，

您可以使用根目录下的

@和
&
：

@mixin query-print {
  @media print {
    @content;
  }

  @at-root.body.is-pdf-mode #{&} {
    @content;
  }
}

在您的示例中，它将返回：

@media print {
  .box {
    background: green;
  }
}

.body.is-pdf-mode .box {
  background: green;
}


.box {
  width: 200px;
  height: 200px;
  background: lightsalmon;
  margin: 15px;
}

@include query-print {
.box {
  background: green;
}
}


@mixin query-print {
  @media print {
    @content;
  }

  @at-root.body.is-pdf-mode #{&} {
    @content;
  }
}

@media print {
  .box {
    background: green;
  }
}

.body.is-pdf-mode .box {
  background: green;
}