Question

我试图在LESS的结果中得到这个：

.article-text {
  -moz-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.25);
}

我的尝试：

.box-shadow(@rgba: 0,0,0,0.25) {
    -moz-box-shadow:    inset 0 0 100px rgba(@rgba);
    -webkit-box-shadow: inset 0 0 100px rgba(@rgba);
    box-shadow:         inset 0 0 100px rgba(@rgba);
}

.shadow,
.article-text {
    .box-shadow();
}

错误：

潜在的未处理拒绝[2]未找到匹配的定义 for .box-shadow() in file /var/.../style.less line no。 613

有什么想法吗？

Answer 1

注意：在他的评论中提到七个阶段的最大值时，最好将前缀内容留给无前缀或自动预览库。

在Less中，为参数mixin定义的参数由逗号或分号分隔，因此当您将mixin定义为.box-shadow(@rgba: 0,0,0,0.25)，~~时，编译器会感到困惑。它在逗号之后遇到的值不是变量而是值。~~编译器将其视为mixin，其中有一个变量参数（@rgba）和三个固定值参数（0， 0,0.25）。

问题的解决方案是将它们用作单独的参数（r，g，b，a）而不是单个参数（rgba）。

.article-text (@r: 0, @g: 0, @b: 0, @a: 0.25) {
  -moz-box-shadow:    inset 0 0 100px rgba(@r, @g, @b, @a);
  -webkit-box-shadow: inset 0 0 100px rgba(@r, @g, @b, @a);
  box-shadow:         inset 0 0 100px rgba(@r, @g, @b, @a);
}
#demo1{
  .article-text;
}
#demo2{
  .article-text(255,255,255,0.75);
}

另一种克服这种情况的方法是在最后使用;（虚拟），例如 - .article-text (@rgba: 0,0,0,0.25;)或将其写为 - .article-text (@rgba: ~"0,0,0,0.25")，但两者都有局限性。第一个将使@rgba变量具有列表作为其默认值，但rgba函数（在mixin中使用）仅期望数字作为输入。因此，我们必须编写丑陋的extract函数来从列表中获取单个值并使用它（如下例所示），而第二个函数将它转换为单个字符串并生成它无法使用。

.article-text (@rgba : 0,0,0,0.25;) {
  @r: extract(@rgba, 1);
  @g: extract(@rgba, 2);
  @b: extract(@rgba, 3);
  @a: extract(@rgba, 4);
  -moz-box-shadow:    inset 0 0 100px rgba(@r, @g, @b, @a);
  -webkit-box-shadow: inset 0 0 100px rgba(@r, @g, @b, @a);
  box-shadow:         inset 0 0 100px rgba(@r, @g, @b, @a);
}
#demo1{
  .article-text;
}
#demo1{
  .article-text(255,255,255,0.75;);
}

较少 - 可能未处理的拒绝[2]未找到匹配的定义？

1 个答案: