Question

当我使用modernizr时，它会在我的rgba标记中添加no-rgba或html类。我正在尝试使用LESS生成mixins。例如：

.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或浏览器如何读取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中，而不是每次都需要硬编码。

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

1 个答案: