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

@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;}

你的问题是一个常见的误解. LESS不处理@media查询,浏览器在LESS完成其工作后执行. LESS只能创建浏览器要读取的CSS代码.所以@media对于LESS来说是“毫无意义的”,就像任何其他选择器(.someClass div表等)一​​样,它只处理@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与此相关的更多信息,请参阅：

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