5

我正在使用 Visual Studio/Web Essentials 创建一组 LESS mixin。

是否可以为 LESS mixins 编写 XML 类型的文档？或者也许有一个枚举来限制输入的参数？

例如，使用这个 mixin：

.background-clip(@value)
{
    -webkit-background-clip: @value;
       -moz-background-clip: @value;
            background-clip: @value;
}

有一些描述三个可能值的文档会很好，就像为背景剪辑创建普通 CSS 选择器一样 -

4

1 回答 1

8

接受值的“枚举”列表

这将通过参数 mixin 调用来处理，如下所示：

.background-clip(@value) when (@value = border-box),
                              (@value = padding-box),
                              (@value = content-box),
                              (@value = inherit)
{
    -webkit-background-clip: @value;
       -moz-background-clip: @value;
            background-clip: @value;
}

这只允许传递给定的四个值以使其激活。所以这：

.test1 {
  .background-clip(border-box);
}

.test2 {
  .background-clip(something);
}

将产生此输出（忽略第二次调用，因为它无效）：

.test1 {
  -webkit-background-clip: border-box;
  -moz-background-clip: border-box;
  background-clip: border-box;
}

评论反馈

如果需要对用户的反馈，那么第二个参数 mixin 可以通过评论提供。

选项 1是纯评论

.background-clip(@value) when not (@value = border-box) and
                              not (@value = padding-box) and
                              not (@value = content-box) and
                              not (@value = inherit)
{
  /* WARNING - INVALID INPUT
     CSS output for backbround-clip property given in
     LESS .background-clip() call has been suppressed
     due to invalid input.

     VALID INPUT is one of:
       border-box
       padding-box
       content-box
       inherit
  */
}

那么上面的测试用例会有这个额外的输出：

.test2 {
  /* WARNING - INVALID INPUT
     CSS output for backbround-clip property given in
     LESS .background-clip() call has been suppressed
     due to invalid input.

     VALID INPUT is one of:
       border-box
       padding-box
       content-box
       inherit
  */
}

选项 2包含一个虚假的属性值，以显示不正确的@value输入是什么：

.background-clip(@value) when not (@value = border-box) and
                              not (@value = padding-box) and
                              not (@value = content-box) and
                              not (@value = inherit)
{
  /* WARNING - INVALID INPUT */
  invalid-background-clip-input-equals: @value;
  /* CSS output for backbround-clip property given in
     LESS .background-clip() call has been suppressed
     due to invalid input.

     VALID INPUT is one of:
       border-box
       padding-box
       content-box
       inherit
  */
}

输出这个额外的测试用例 CSS：

.test2 {
  /* WARNING - INVALID INPUT */
  invalid-background-clip-input-equals: something;
  /* CSS output for backbround-clip property given in
         LESS .background-clip() call has been suppressed
         due to invalid input.

         VALID INPUT is one of:
           border-box
           padding-box
           content-box
           inherit
      */
}

浏览器会忽略 的无法识别的“属性” invalid-background-clip-input-equals，但它会提醒查看已编译 css 的人传递的值是无效的。

选项 3包含一个伪造的（即未定义的）混合，可能会导致编译错误（不同的编译器可能以不同的方式处理未定义的混合）：

.background-clip(@value) when not (@value = border-box) and
                              not (@value = padding-box) and
                              not (@value = content-box) and
                              not (@value = inherit)
{
   .background-clip-undefined();
}

在此编译器中输出此信息：

SyntaxError: .background-clip-undefined is undefined on line 24, column 3:

23 .test2 {
24   .background-clip(something);
25 }

这可能是一种通过抛出错误来“强制”较少程序员输入有效值的方法。请注意，在这种情况下，给出错误的实际未定义 mixin 是.background-clip-undefined()，但该编译器实际上提供了“调用”信息.background-clip(something)，而这正是错误所在。

可以将选项 2 和 3 结合起来，这样如果编译器没有抛出错误，至少注释反馈是可见的。

于 2014-01-10T18:51:23.667 回答