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

时间:2012-11-16 15:11:50

标签: css twitter-bootstrap responsive-design less media-queries

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

1 个答案:

答案 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;
            }
        }
    }
}