如何使用LESS更有效地使用媒体查询？

Question

我正在使用Bootstrap和LESS来响应网页设计。

过去我喜欢LESS的原因之一是因为它可以将HTML元素的所有属性保留在一起。

我有下面是适用于该块中的元素一些规则来定义.sponsors块，然后一个规则时，视口> = 768px

我不喜欢有一个规则如何要求很多额外的代码，以及该规则与其他规则的区别。它也感觉不对。

什么是更好的方式来做到这一点/组织这一点？我是否需要首先将所有内容打破成顶级@media组？

.sponsors 
{ 
    li 
    { 
     .thumbnail 
     { 
      padding-top:20px; 
      padding-bottom:15px; 
      img 
      { 
       display:block; 
       margin:0 auto; 
      } 
     } 
    } 
} 


@media (min-width: 768px) 
{ 

    .sponsors 
    { 
     li 
     { 
      .thumbnail 
      { 
       padding-bottom:0px!important; 
      } 
     } 
    } 
} 

这将是非常甜蜜的，如果有这样的：

.thumbnail 
{ 
    &[@mediaWidth >=768] 
    { 
    padding-bottom:0px!important; 
    } 
} 

Answer 1

我想你可以嵌套媒体查询及以下（> 1.3.0）将“泡沫”他们所在的根目录编译期间的样式表。

.sponsors 
{ 
    li 
    { 
     .thumbnail 
     { 
      padding-top:20px; 
      padding-bottom:15px; 

      @media (min-width: 768px) { 
       padding-bottom:0px!important; 
      } 

      img 
      { 
       display:block; 
       margin:0 auto; 
      } 
     } 
    } 
}