3

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

这是我的混音：

.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，构建 969。

4

2 回答 2

4

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

.test {
  .gradient; 
}

以下对我有用：

@blue: blue;
@red: red;

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

Codepen

参数 mixins文档中的更多详细信息

于 2013-07-09T21:02:25.187 回答
0

你有两个主要问题

首先，你已经background在你的 mixin 中包含了属性，这是正确的语法，但是像你一样调用它作为属性的值是不正确的：

.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);
于 2013-07-09T22:46:28.017 回答