6

変数によって設定された値が >= 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 内では不可能であることがわかっただけでも、これについて何か助けていただければ幸いです。ありがとうございました

4

2 に答える 2