web-dev-qa-db-ja.com

LESS CSSネストクラス

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

.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にネストしたいと思います。何か案は？

cssnestedless
97
newbie_86

&文字には、実際にはthisキーワードの機能があります（答えを書いている時点では知りませんでした）。以下を書くことができます：

.class1 {
    &.class2 {}
}

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

.class1.class2 {}

記録では、@ grobittoがこの情報を最初に投稿しました。

[元の回答]

LESSはこの方法では機能しません。

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

.class1 {
    .class2 {}
}

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

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

183
mingos
.g {
    &.posted {
    }
}

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

114
grobitto

アンパサンドがネストの子要素のすぐ隣にある場合、ダブルクラスセレクターにコンパイルされます。 ＆とセレクターの間にスペースがある場合は、子セレクターにコンパイルされます。 Less here でネストの詳細をご覧ください。

2
Nesha Zoric