我试图在媒体查询中重用一组类作为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不处理@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
