Question

我有一个特殊情况，我的样式需要同时应用于两种打印介质，并且当<body>具有要检测的特殊类时，我们仅将其称为.is-pdf-mode。

在我的SCSS中，我尝试使用@content来避免重复CSS，但是以某种方式，结果CSS不能为<body>情况生成正确的选择器，我不能使用&这个混入里面的选择器。到目前为止，这是我的尝试。

SCSS：

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

  .body.is-pdf-mode {
    @content;
  }
}

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

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

@media print {
// Default styling only apply for print
html,
body,
page[size="A4"] {
    padding:0px;
    margin:0px;
    width: 210mm;
    height: 297mm;
}

body {
  -webkit-print-color-adjust: exact !important;
  zoom: 100%;
}

}

HTML：

<div class="body">
  <div class="box">
    hello
  </div>
</div>

<div class="body is-pdf-mode">
  <div class="box">
    hello
  </div>
</div>

我了解到，通过在该mixin中编写.body.is-pdf-mode来表示.box .body.is-pdf-mode，应该改为.body.is-pdf-mode .box。那么，我的问题是在这种情况下编写CSS的正确方法是什么？

Codepen尝试：https://codepen.io/DieByMacro/pen/xoLNpE

更新1：在query-print mixin中重写我的CSS：

如果我这样写：

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

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

显然这是可行的，但是在我的真实项目中，我们在选择器内部使用了@include mixin。通过应用这种策略，这意味着要重写很多选择器，因此，我认为当没有其他选择时，这将是我的最后选择。

谢谢

Answer 1

您可以使用msg.payload和$.payload：

@at-root

以您的示例为例，它将返回：

SASS @at-root documentation

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

1 个答案: