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

前端之家收集整理的这篇文章主要介绍了css – 使用媒体查询中的类集作为mixin in less前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在媒体查询中重用一组类作为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中的一个错误,还是我永远无法实现的?对此的解决方法将是理想的.

解决方法

你的问题是一个常见的误解. 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

原文链接:https://www.f2er.com/css/217573.html

猜你在找的CSS相关文章