Question

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

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

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

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

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

Answer 1

正如您已经正确发现的那样，目前无法在媒体查询中的选择器块中扩展媒体查询之外的块的属性。我怀疑这样做的原因是，简单来说，: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;
  }
}

使用Less extend获取媒体查询之外的样式？

1 个答案: