4

＆parentセレクターが非常に便利であることがわかったのはこれが初めてなので、子要素を変更するためだけに親を再定義する必要はありません。

もちろん、これはLESSで実際に簡単ですが、私は尋ねなければなりません！

<div id="skrollr-body" class="nonav">
    <div class="skrollable">

    </div>
</div>


#skroller-body {
    .skrollable {
        margin-top:40px;

        .nonav & {
            // this parent selector lets me modify 
            // .skrollable without duplicating it
            margin-top:0px;

        }
    }
}

の出力.nonav &は .nonav #skroller-body .skrollable

#skroller-body.nonav .skrollable代わりに、余分なHTMLマークアップ（ラッパー）なしで何とか取得できるかどうか疑問に思っていますdiv.nonavか？

現在、親を複製します

#skrollr-body {
    margin-top:40px;
    left:0;
    width:100%;

    .skrollable {
        margin-top:40px;
        position:fixed;
        z-index:100;
        .skrollable {
            position:absolute;

            .skrollable {
                position:static;
            }
        }
    }
    &.nonav {
            .skrollable {
                 margin-top:0px;
            }
    }
}

または、冗長な出力を保存します。

#skroller-body.nonav .scrollable { margin-top:0px; }

しかし、ここで重要なのは、保守と読み取りが簡単なCSSコードです。

4

1 に答える 1

5

ドキュメントには次のように記載されています。

演算子は、ネストされたルールの&親セレクターを表し、変更クラスまたは疑似クラスを既存のセレクターに適用するときに最も一般的に使用されます。

そう：

#skroller-body {
        &.nonav {
            .skrollable {
                // stuff
            }
        }
    }
}
于 2012-10-30T20:03:10.443 に答える