css - less での条件付き実行

Question

LESSを使用して、ミキシング内で条件を実行しようとしています

これが私のコードです

.my-mixing (@isInverse) {
    .navbar {
        when(@isInverse) {
            .navbar-inverse;
        }
    }
}

.my-mixing(true);

それは動作しません。
ヒントはありますか？

Answer 1

使用しようとしている方法で使用することはできませんwhen。常にmixin宣言の後に表示する必要があります。また、変数がガードと一致しない場合は、フォールバックミックスインを提供する必要があります。

.my-mixing (@isInverse) {
    .navbar {
       .navbar-inverse(@isInverse);         
    }
}

.navbar-inverse(@a) when(@a){
   /* do something if it matches */
}
.navbar-inverse(@a) when not(@a){
  /* do something else (or nothing at all) */
}

.my-mixing(true);

2番目のミックスインに追加when not(@a)したので、それ自体は含まれません。スタイルが上書きされないように、ガードされたミックスインの前に配置することもできます。

Answer 2

次のhtmlを考えると...

<div class="navbar">
    I am navbar!
</div>

これは実用的なソリューションです：

.navbar-inverse(@isInverse){
    // do nothing or whatever
}
.navbar-inverse(@isInverse) when(@isInverse){
    // apply styles for inverse navbar
}

.my-mixin(@isInverse){
    .navbar{
        .navbar-inverse(@isInverse);
    }
}
.my-mixin(true);

しかし、HTML を表示して問題をより正確に指定していれば、より適切な解決策があるかもしれません。