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

【问题标题】：How to pass variables to LESS parametric mixin for gradient?如何将变量传递给 LESS 参数 mixin 以进行渐变？
【发布时间】：2013-07-10 06:46:28
【问题描述】：

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

这是我的混音：

.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。

【问题讨论】：

标签： css macos less gradient

【解决方案1】：

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

.test {
  .gradient; 
}

以下对我有用：

@blue: blue;
@red: red;

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

Codepen

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

【讨论】：

【解决方案2】：

你有两个主要问题

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

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

应该是这样的：

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

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

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

【讨论】：