3

Bootstrap と LESS を使用して、レスポンシブ Web ページのデザインに取り組んでいます。

私がこれまで LESS を楽しんできた理由の 1 つは、HTML 要素のすべての属性をまとめて保持できるからです。

以下にあるのは、ブロックを定義するためのいくつかのルールと.sponsors、ビューポートが >= 768px の場合にそのブロック内の要素に適用される 1 つのルールです。

私は、その 1 つのルールに多くの余分なコードが必要であり、そのルールが残りのルールとどのように離れているかが好きではありません。それも気持ち悪い。

これを行う/整理するためのより良い方法は何ですか? @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;
    }
}
4

1 に答える 1

13

メディアクエリをネストできると思います.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;
            }
        }
    }
}
于 2012-11-16T15:44:35.630 に答える