110

CSS を改善するために LESS を使用しており、クラス内にクラスをネストしようとしています。かなり複雑な階層がありますが、何らかの理由でネストが機能しません。私はこれを持っています:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
    .posted {
         .my-posted;
         span {
            border: none;
         }
    }
}

私は.g.posted仕事を得ることができません。.gそれはビットを示しているだけです。私がこれをすれば大丈夫です:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
}

.g.posted {
         .my-posted;
         span {
            border: none;
         }
    }

私は入れ子にしたいの.postedです.gが。何か案は?

4

3 に答える 3

207

実は、&文字にはthisキーワードの機能があります(回答を書いている時点では知りませんでした)。次のように書くことができます。

.class1 {
    &.class2 {}
}

生成される CSS は次のようになります。

.class1.class2 {}

ちなみに、この情報を最初に投稿したのは @grobitto です。


[元の回答]

LESS はこのようには機能しません。

.class1.class2 {}- 同じ DOM ノードで 2 つのクラスを定義しますが、

.class1 {
    .class2 {}
}

ネストされたノードを定義します。.class2クラスを持つノードの子である場合にのみ適用されますclass1

私もこれと混同しており、私の結論は、LESSにはthisキーワードが必要だということです:)。

于 2011-02-25T12:22:13.777 に答える
118
.g {
    &.posted {
    }
}

.posted の前に「&」を追加する必要があります

于 2011-03-27T18:27:55.310 に答える