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

Question

我正在使用 Bootstrap 和 LESS 进行响应式网页设计。

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

我下面有一些规则来定义 .sponsors block ，然后是当视口(viewport)> = 768px时应用于该 block 内元素的一条规则

我不喜欢该规则如何需要大量额外代码，以及该规则如何与其他规则分开。也觉得不对劲。

有什么更好的方法来做到这一点/组织这个？我是否需要先将所有内容分解为顶层 @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

我认为您可以嵌套媒体查询，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;
            }
        }
    }
}