css - 是否可以使用 css 预处理器有条件地生成 css？

Question

当我使用modernizr 时，它会在我的标签中添加rgba或分类。我正在尝试使用. 例如：no-rgbahtmlLESS

.background-content{
  background: #000;
  background: rgba(0,0,0,0.5);
}

header{
  .background-content;
}

现在，我想做的是如果rgba存在的话：

.background-content{
  background: rgba(0,0,0,0.5);
}

但如果no-rgba存在，那么我希望它是这样的：

.background-content{
  background: #000;
}

我的问题是，是否可以使用条件生成 mixins？是否有可能当我在.background-content里面header做时，它会根据存在的类给出不同的背景颜色？如果LESS做不到，可以SASS做吗？

Answer 1

预处理器不可能知道有关您的 HTML 或浏览器如何读取它的任何信息。但是，如果我理解正确，您可以使用 Sass 获得所需的（以及更多）：

@mixin background-content {
  background: rgba(0,0,0,0.5);
  .no-rgba & { background: #000; }
}

header {
  @include background-content;
}

您可以通过采用参数来使其更加灵活：

@mixin background-content($rgba, $no-rgba: rgba($rgba,1)) {
  background: $rgba;
  .no-rgba & { background: $no-rgba; }
}

header {
  @include background-content(rgba(0,0,0,0.5));
}

条件在 mixin 内部，而不是每次都需要硬编码。