限制混合值并在提供无效值时引发异常 [英] Restrict mixin values and throw exception when invalid value is provided

问题描述

我有以下Less mixin:

I have the following Less mixin:

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

，并且我只允许将值"border-box"和"content-box"作为参数，否则Less引擎应引发异常.我怎样才能做到这一点?因为没有此验证，我就可以向mixin写入任何值，并且可以正常工作，但是它将生成无效的CSS，并且没人会注意到错误.

and I would like to allow only the values 'border-box' and 'content-box' as parameter, otherwise the Less engine should throw an exception. How can I achieve this? Because without this validation I can write any value to the mixin and it will work, but it will also generate invalid CSS and no one will notice that there is an error.

推荐答案

据我所知，没有办法使Less编译器针对无效值抛出错误，如所述.但是，通过使用后卫功能.

As far as I know, there is no way to make the Less compiler throw an error for an invalid value like described in question. However, you can make the Less compiler not to produce any output at all when an invalid value is provided by making use of the guards feature.

在以下代码段中，仅当两个有效值之一作为输入传递时，mixin才被调用.如果提供了不同的值，那么Less编译器将找不到匹配项，因此将不会输出任何内容.

In the below snippet, the mixin is invoked only when either of the two valid values are passed as input. If a different value is provided, Less compiler would find no match and hence wouldn't output anything.

.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值.

Less also has some built-in type functions which can be used along with guards to check if a value is valid or not (like if the input is a number or is a color etc). There is also an iskeyword function but none of these would check for an invalid CSS value.

如果您有很多有效值，则可以使用如下所示的循环功能.在这里，我们从有效值数组中提取每个值，如果输入值与其中一个匹配，则输出属性.如果输入与任何输入值都不匹配，则不会再次输出任何内容.

If you have a wide list of valid values then you could make use of the loops feature like below. Here, we extract each value from the array of valid values and if the input value matches one of them, we output the properties. If the input does not match any input value, nothing is output (again).

@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);
}

---

绝对不推荐，但是如果您坚持要让编译器在提供无效值时引发某些异常或其他异常，则可以故意在 not-valid-value中引入错误部分.

---

Strictly not recommended but if you insist on making the compiler throw some exception or the other when an invalid value is provided then you could deliberately introduce an error in the not-valid-value part.

.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);
}

这篇关于限制混合值并在提供无效值时引发异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！