css - 如何将变量传递给用于渐变的 LESS 参数混合？

Question

这应该很容易找到，但我只是运气不好。我想为线性渐变创建一个参数混合，并有一些具有默认值的变量，我可以稍后通过在调用它时传递新变量来更改它们。但出于某种原因，当我尝试传递变量时，它给我一个语法错误。

这是我的混音:

.gradient (@startColor: #adc7e7; @endColor: #ffffff) {
background-color: @endColor;
background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background: -webkit-linear-gradient(top, @startColor, @endColor);
background: -moz-linear-gradient(top, @startColor, @endColor);
background: -ms-linear-gradient(top, @startColor, @endColor);
background: -o-linear-gradient(top, @startColor, @endColor);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startcolor', endColorstr='@endColor', GradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor',endColorstr='@endColor',GradientType=1);
}

当我这样调用它时，没问题(它只是使用默认颜色)...

.test {background: .gradient; }

但是当我这样调用它来更改 from 或 to 颜色时，编译时出现语法错误...

.test {background: .gradient(#eeeeee,#ffffff); }
/* semicolon between the values don't work either */

我已经尝试了所有不同的写法，但都没有成功。 LESS 文档根本没有帮助，它使用的是 @arguments 变量，我看不出如何将其用于渐变。

我正在为 mac 使用 LESS 编译器(来自 incident57)，版本 2.8，build 969。

Answer 1

你应该像这样包含你的 mixin:

.test {
  .gradient; 
}

以下对我有用:

@blue: blue;
@red: red;

body {
   .gradient(@blue, @red);
}

Codepen

parametric mixins 中有更多详细信息文档