6

私は LESS に入ったばかりで、ミックスインなしで条件付き css ステートメントを作成する方法を理解しようとしています。一度しか発生しないが、いくつかの変数または条件に依存する多くの単一行の css ステートメントがあり、再利用されることはないため、ミックスインを使用することは少し無意味であることがわかりました。

例。

@add-margin: true;

body {
    margin-top: 20px;  //I only want this if add-margin is true
}

だから理想的にはこれが欲しい：

body when (@add-margin) {
     margin-top: 20px;
}

しかし、それはうまくいきません。ミックスインの使用は機能しますが、1 つのライナーだけを作成するのはばかげているようです。これを行うことができる別の方法はありますか？

ありがとう

4

3 に答える 3

8

はい、できます。コードに似ています。

@add-margin: true;

.margin() when (@add-margin) {
    margin-top: 20px;
}

body { .margin(); }

更新:最新バージョンの LESS (1.5+) を使用すると、これを達成するために「保護された mixins」を使用する必要はありません。代わりに「css gaurds」を使用できるため、OP のコードはそのまま使用できます。

于 2012-10-01T13:23:36.417 に答える
1

いいえ、その形ではできません。

0 または 1 に等しい変数を使用して 20 を掛けてから常にルールを出力するか、JavaScript (これを避けることをお勧めします) を使用して true を 0 または 20 に変換し、常にルールを出力することができますが、条件付きでプロパティを追加するには、ガードが必要です。

于 2012-07-03T04:47:13.613 に答える