2

次の Less mixin があります。

.box-sizing(@value) {
    -webkit-box-sizing: @value;
    -moz-box-sizing: @value;
    box-sizing: @value;
}

'border-box' と 'content-box' の値のみをパラメーターとして許可したいと思います。そうしないと、Less エンジンが例外をスローする必要があります。どうすればこれを達成できますか？この検証がなくても、ミックスインに任意の値を書き込むことができ、機能しますが、無効な CSS も生成され、エラーがあることに誰も気付かないからです。

4

2 に答える 2

3

私の知る限り、Less コンパイラに問題のような無効な値に対してエラーをスローさせる方法はありません。ただし、ガード機能を利用することで、無効な値が指定された場合に、Less コンパイラがまったく出力しないようにすることができます。

以下のスニペットでは、2 つの有効な値のいずれかが入力として渡された場合にのみ mixin が呼び出されます。別の値が指定された場合、Less コンパイラは一致するものを見つけられないため、何も出力しません。

.box-sizing(@value){
    & when (@value=content-box) , (@value=border-box){ /* comma is the or operator */
        -webkit-box-sizing: @value;
        -moz-box-sizing: @value;
        box-sizing: @value;
    }
}
#demo{
    .box-sizing(content-box);
}

Less には、値が有効かどうか (入力が数値であるか色であるかなど) をチェックするためにガードと共に使用できる組み込みの型関数もいくつかあります。関数もありiskeywordますが、無効な CSS 値をチェックするものはありません。

有効な値の幅広いリストがある場合は、以下のようなループ機能を利用できます。ここでは、有効な値の配列から各値を抽出し、入力値がそれらのいずれかに一致する場合、プロパティを出力します。入力がどの入力値とも一致しない場合、何も出力されません (再び)。

@valid-values: content-box, border-box, padding-box;
.box-sizing(@value){
    .loop-valid-values(@index) when (@index > 0){
        @valid-value: extract(@valid-values, @index);
        & when (@value= @valid-value){
            -webkit-box-sizing: @value;
            -moz-box-sizing: @value;
            box-sizing: @value;
        }
        .loop-valid-values(@index - 1);
    }
    .loop-valid-values(length(@valid-values));
}
#demo{
    .box-sizing(content-box);
}

厳密には推奨されませんが、無効な値が指定されたときにコンパイラに何らかの例外をスローさせることを主張する場合は、無効な値の部分に故意にエラーを導入することができます。

.box-sizing(@value){
    & when (@value= content-box), (@value= border-box){
        -webkit-box-sizing: @value;
        -moz-box-sizing: @value;
        box-sizing: @value;
    }
    & when not (@value= content-box), (@value= border-box){
        output: @bwahahaha; /* there is no such variable and hence when the input value is not valid, compiler will complain that variable is undefined */
    }
}
#demo{
    .box-sizing(conten-box);
}
于 2015-05-31T11:32:24.527 に答える