带有多个参数的 LESS mixins答案

【问题标题】：LESS mixins with multiple arguments带有多个参数的 LESS mixins
【发布时间】：2012-03-25 22:55:01
【问题描述】：

我设置了这个小混音：

.linear-gradient(@direction:top, @color1:#fff, @color2:#000) 
{
    background-image: -webkit-linear-gradient(@direction, @color1, @color2);
}

然后，在我的main.less 中，我正在尝试这样的事情：

a { .linear-gradient(top, #999, #666); }

这很好，说我想做这样的事情：

a { .linear-gradient(top,     , #666); }

现在，第一种颜色应该默认为其默认的混合颜色。我该怎么做呢？这可能吗

【问题讨论】：

【解决方案1】：

您也可以显式传递参数，其余参数采用默认值。

a { .linear-gradient(@direction:top, @color2:#666); }

【讨论】：

【解决方案2】：

Less 并不是那么聪明。你可以是明确的：

.linear-gradient(top, #fff, #000);

或使用变量作为抽象来传递默认值。

@colorVar1: #fff;

.linear-gradient(top, @colorVar1, #000);

less 不知道如何处理一个空的空间，并将其视为无效。

【讨论】：

我没有办法知道。问题是 LESS 不知道哪种类型的值适合哪个参数，因此它必须假设您将按顺序提供它们。您可以尝试指定参数变量名称，希望它将自己用作默认值（例如.linear-gradient(top, @color1, #000)），但我还没有尝试过。可能行不通。
不，不起作用。嗯，所以我遇到了 Less I guess 的限制。
我可能弄错了，但我认为这实际上是所有预处理器的限制。如果您使用的是 SASS，您可以使用 @if 条件来处理空字符串的情况，但您可能仍然需要指定到某个级别 - 例如 top,'',#000