0

私はLESSを使い始めたばかりですが、これに対する答えをどこにも見つけることができませんでした。

同じクラスのある種のネストまたは再帰をあまりサポートできませんか?

私の要件は、同じ名前の別の div の下のどこかに div をネストできることです (親 div の直接の最初のレベルの子であるとは限りません)。

2 番目の div を最初の div とは異なるスタイルにする必要があります...これは可能ですか。

注: 私はプロジェクトのために LESS を使用することに縛られているため、他のフレームワークはオプションではありません。divごとに異なるクラスを定義することは機能しますが、オプションではありません。私はこれが奇妙なものであることを知っていますが、残念ながら私が取り組んでいるプロジェクトの制限内で作業しています.

4

2 に答える 2

4

次のようにできるはずです。

div.someClass {
    div.someClass {

    }
}

次のように、ネストされた div 内で不要になった元のスタイルを「リセット」する必要があるでしょう。

div.someClass {
    color: red;
    div.someClass {
        color: #333;
    }
}
于 2013-05-17T18:21:58.377 に答える
3

もちろん、セレクターをネストできます。親の内側または外側で mydiv を異なる方法で表示する場合の例を次に示します。.mydiv内のどこかにある場合は赤で表示さ.outerdivれ、ページの他の場所は赤で表示されます。

以下：

.mydiv {
    height:100px;
    width:200px;
    background:green;
}
.outerdiv {
    width:300px;
    background:orange;
    .mydiv {
        background:red;
    }
}

出力CSS:

.mydiv {
  height: 100px;
  width: 200px;
  background: green;
}
.outerdiv {
  width: 300px;
  background: orange;
}
.outerdiv .mydiv {
  background: red;
}

セレクターは、ネストレベルに関係なく、outerdiv 内.outerdiv .mydivのクラスのすべてのオブジェクトで機能します。.mydiv

デモ

そして、同じ名前のネストされたクラスでも同じように機能するはずです（変数と計算にいくらかの空想を追加します=）

以下：

@width:300px;

.mydiv {
    height: 100px;
    width: @width;
    background: green;
    .mydiv {
        width:(@width - 100px);
        background:red;
    }
}

出力CSS:

.mydiv {
  height: 100px;
  width: 300px;
  background: green;
}
.mydiv .mydiv {
  width: 200px;
  background: red;
}

マルチレベル セレクターは、スタイルシートの単純なセレクターからプロパティを自動的に継承します。

デモ 2

お役に立てれば！

于 2013-05-17T18:42:14.740 に答える