如何使用LESS更有效地使用媒体查询？ [英] How can I use media queries more efficiently with LESS?

问题描述

我在响应式网页设计中使用Bootstrap和LESS。

I'm working with Bootstrap and LESS on a responsive webpage design.

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

One of the reasons I have enjoyed LESS in the past is because it can keep all attributes for HTML elements together.

下面是一些定义 .sponsors 块的规则，当视口为> = 768px

What I have below is some rules to define a .sponsors block, and then one rule that applies to an element inside that block when the viewport is >= 768px

时，应用于该块内的元素的规则我不喜欢该规则需要多少额外代码，规则与其余规则分开。

I don't like how that one rule requires a lot of extra code, and how that rule is apart from the rest of the rules. It also feels wrong.

什么是更好的方法来做这个/组织呢？我需要从一开始就把所有东西分解到顶层 @media 组？

What is a better way to do this / organize this? Do I need to start out by breaking everything down into top level @media groups?

.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;
            }
        }
    }
}

如果有类似的话会很漂亮：

It would be pretty sweet if there was something like:

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

推荐答案

I认为您可以嵌套媒体查询，LESS（> 1.3.0）将在编译期间将它们冒泡到您的样式表的根。

I think you can nest media queries and LESS (>1.3.0) will 'bubble' them to the root of your stylesheet during compilation.

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

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

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

这篇关于如何使用LESS更有效地使用媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！