使用媒体查询中的类集作为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预处理器,可以在@media查询中定义变量
2. 媒体查询分组而不是匹配的多个分散媒体查询