How can I use media queries more efficiently with LESS?

Question

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

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

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.

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

Answer 1

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