Question

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

这是我的mixin：

.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或者颜色时，编译时会出现语法错误...

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

我已经尝试了所有不同的写作方法，但没有任何运气。 LESS文档根本没用，它使用@arguments变量，我看不到如何使用渐变。

我正在使用LESS编译器（来自incident57）for mac，版本2.8，build 969.

Answer 1

你应该像这样包括你的mixin：

.test {
  .gradient; 
}

以下适用于我：

@blue: blue;
@red: red;

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

Codepen

parametric mixins doc

中的更多详细信息

Answer 2

您有两个主要问题

首先，您已经在mixin中包含了background属性，这是正确的语法，但却使不正确称之为属性的值：

.test {background: .gradient(#eeeeee,#ffffff); }

相反，它应该是这样的：

.test {.gradient(#eeeeee,#ffffff); }

第二次，您的两个filter调用需要具有不同调用的变量的语法，因为它们嵌套在单引号内。因此，他们应该更改为以下内容（请注意变量名称周围的{括号}）：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}', endColorstr='@{endColor}', GradientType=1); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}',endColorstr='@{endColor}',GradientType=1);

如何将变量传递给LESS参数mixin进行渐变？

2 个答案:

您有两个主要问题