-

Question

我有以下Less mixin：

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

我想只允许使用值＆＃39; border-box＆＃39;和＆＃39;内容框＆＃39;作为参数，否则Less引擎应抛出异常。我怎样才能做到这一点？因为没有这个验证，我可以将任何值写入mixin并且它可以工作，但它也会生成无效的CSS，没有人会注意到有错误。

Answer 1

据我所知，没有办法让Less编译器为有问题的无效值抛出错误。但是，当使用guards feature提供无效值时，可以使Less编译器完全不产生任何输出。

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

def setUp(self):
    c = Client()
    response = c.get('/url/to/view/')

Less还有一些内置的type functions可以与警卫一起使用来检查一个值是否有效（比如输入是数字还是颜色等）。还有一个.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); }函数，但这些函数都不会检查无效的CSS值。

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

iskeyword

严格不推荐，但是如果您在提供无效值时坚持让编译器抛出一些异常，那么您可能会故意在 not-valid-value中引入错误部分。

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

Answer 2

您可以使用其他名称隐藏实际的mixin实现，并仅为content-box提供border-box / .box-sizing次重载：

// impl.:

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

// usage:

usage {
    .box-sizing(content-box); // OK
    .box-sizing(content-foo); // Error: No matching definition was found for `.box-sizing(content-foo)`
}

（与警卫不同，"argument pattern matching"（又称重载）如果不匹配则不会默默跳过。

上面稍微重复一点的变体：

.box-sizing(@value) {
    .-(@value);
    .-(border-box)  {.ok}
    .-(content-box) {.ok}

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

错误消息不那么具有描述性：No matching definition was found for '.-(content-foo)'因此您可能会发现使用.box-sizing_左右而不是.-更好。

-

虽然测试每个mixin参数并且如果它不适合抛出错误的想法有点奇怪。（你打算为你写的每一个混音做这个吗？这是很多无聊......）你最好把一些CSS验证器/ lint放到你的构建链中。

供应商前缀的常用说法：停止为此编写mixins并使用Autoprefixer 。

限制mixin值并在提供无效值时抛出异常

2 个答案:

-