使用媒体查询中的类集作为mixin in less

Question

我试图在媒体查询中重用一组类作为mixins在整个网站中使用，而不是在html中嵌入非语义类名。

这是我的问题的一个例子。

@media (min-width: 1000px) {

    .foo{width:120px;}
    .foo-2{width:150px;}
}
@media (max-width: 999px) {

    .foo{width:110px;}
    .foo-2{width:120px;}
}

.bar{.foo;}
.bar-2{.foo;}
.bar-3{.foo-2;}

.bar-X永远不会应用任何样式。我猜可能会发生这种情况，因为LESS不会在媒体查询中创建.bar-X，因此不会应用任何内容。

这是LESS中的一个错误，还是我永远无法实现的？对此的解决方法将是理想的。

Answer 1

您的问题是一种常见的误解。 LESS没有处理 @media查询，浏览器在LESS完成其工作后执行。 LESS只能创建浏览器要读取的CSS代码。因此，@media对于LESS来说是“无意义的”，它就像任何其他选择器（.someClass div table等）一样，它只处理@media将要向浏览器提供的内容。

这意味着您需要将@media中所有更改的代码放在@media块中。但是你也不想要一堆重复的代码。因此，创建一个主mixin来设置@media代码，然后从媒体查询中调用mixin：

.makeFooGroup(@w1, @w2) {
    .foo {width: @w1}
    .foo-2{width: @w2}
    .bar{.foo}
    .bar-2{.foo}
    .bar-3{.foo-2}
}

@media (min-width: 1000px) {
    .makeFooGroup(120px, 150px);
}
@media (max-width: 999px) {
    .makeFooGroup(110px, 120px);
}

制作此css：

@media (min-width: 1000px) {
  .foo {width: 120px;}
  .foo-2 {width: 150px;}
  .bar {width: 120px;}
  .bar-2 {width: 120px;}
  .bar-3 {width: 150px;}
}
@media (max-width: 999px) {
  .foo {width: 110px;}
  .foo-2 {width: 120px;}
  .bar {width: 110px;}
  .bar-2 {width: 110px;}
  .bar-3 {width: 120px;}
}

有关LESS和@media与此相关的更多信息，请参阅：

1. CSS pre-processor with a possibility to define variables in a @media query
2. Media Query grouping instead of multiple scattered media queries that match