css - 使用 Less extend 在媒体查询之外获取样式？

Question

我花了一段时间才弄清楚为什么这不起作用:

@md: ~"only screen and (min-width: 48.9375em)";
.col-2 { width: 50%; }
.block1, .block2 {
    @media @md {
      &:extend(.col-2, .pull-left);
    }
}

我研究并发现了为什么这不起作用。 Less :extend() 忽略它，因为它们不在同一个媒体查询中。那么如何在 Less 中重新创建以下内容？

.col-2 { width: 50%; }
@media only screen and (min-width: 48.9375em) {
    .block1, .block2 {
        width: 50%;
    }
}

编辑:对于这个例子，我意识到在 .block1, .block2 中添加单一样式会更快，但我有很多类似实例的例子，我需要外部类的样式另一个元素的媒体查询中的媒体查询。因此，找出执行此操作的最佳方法即可解决问题。

Answer 1

正如您正确发现的那样，目前无法在媒体查询内的选择器 block 中扩展媒体查询外的 block 的属性。我怀疑这样做的原因是，简单来说，:extend 所做的就是组选择器，这在这里无法完成。如果 .col-2 在媒体查询中分组，它会产生错误的行为(并且)不能将媒体查询作为逗号分隔值添加到选择器组中。

您可以像下面的代码片段一样在媒体查询中调用所需的类。

更少的代码:

@md: ~"only screen and (min-width: 48.9375em)";
.col-2 { width: 50%; }
.pull-left { float: left; }
.block1, .block2 {
  @media @md {
    .col-2;
    .pull-left;
  }
}

输出 CSS:

.col-2 {
  width: 50%;
}
.pull-left {
  float: left;
}
@media only screen and (min-width: 48.9375em) {
  .block1,
  .block2 {
    width: 50%;
    float: left;
  }
}