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

Question

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

csstwitter-bootstrapresponsive-designlessmedia-queries

3

我正在使用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;
    }
}

- cwd

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard M · Accepted Answer

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