変数によって設定された値が >= 0 の場合にのみ出力するよりも、border-radius の mixin を作成しようとしています。 border-radius mixin は、最終的なスタイルシートにプロパティを作成しません。すべてのコーナーに同じ値を持たせたい場合は、これを機能させることができます。しかし、短縮形、つまり 3px 3px 0 0 を使用したい場合、それを機能させる方法を試してみることはできません。両方のシナリオで変数と 0 によって 3px が変更されるという問題だと思います。現時点での私のコードは
.border-radius(@r) when not (@r = no), (@r = 0) {
-webkit-border-radius: @r;
-moz-border-radius: @r;
border-radius: @r;
}
.border-radius(@r) when (@r = no), (@r = 0) {}
@baseBorderRadius: 3px;
.class1 { .border-radius(@baseBorderRadius); }
// This outputs fine: 3px 3px 3px 3px
.class2 { .border-radius(@baseBorderRadius @baseBorderRadius 0 0); }
// This outputs fine 3px 3px 0 0
@baseBorderRadius: no; // If I change the variable to try and disable/not run the mixin
.class1 { .border-radius(@baseBorderRadius); }
// This does what I want and doesn't run the mixin
.class2 { .border-radius(@baseBorderRadius @baseBorderRadius 0 0); }
// THIS IS THE PROBLEM! This outputs: no no 0 0
したがって、グローバル変数から定義された特定の値または単語が含まれている場合、ミックスインを無効にする/実行しない方法が必要です。ブランドに基づいて、企業が角を丸くしたいかどうかにかかわらず、最終的なスタイルシートに不必要に0の値を含めたくないテーマ変数ファイルに対してこれを行っています。
私がやりたいことが LESS 内では不可能であることがわかっただけでも、これについて何か助けていただければ幸いです。ありがとうございました