less - 限制混合值并在提供无效值时引发异常

我有以下Less mixin：

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

并且我只允许将值'border-box'和'content-box'作为参数，否则Less引擎应该抛出异常。我该如何实现？因为没有此验证，我就可以向mixin写任何值，并且它可以工作，但它也会生成无效的CSS，而且没人会注意到错误。

最佳答案

据我所知，没有办法让Less编译器针对无效值抛出错误，如所述。但是，当使用guards feature提供无效值时，可以使Less编译器根本不产生任何输出。

在下面的代码段中，仅当两个有效值之一作为输入传递时，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还具有一些内置的type functions，可以与防护措施一起使用以检查值是否有效（例如，输入是数字还是颜色等）。还有一个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);
}

关于less - 限制混合值并在提供无效值时引发异常，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30556401/