我正在使用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;
}
}
答案 0 :(得分:12)
我认为您可以嵌套媒体查询,LESS(> 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;
}
}
}
}