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

Question

This should be a really easy thing to find but I am just not having any luck. I want to create a parametric mixing for a linear gradient, and have some variables with default values that I can change later by passing new variables when I call it. But for some reason it is giving me a syntax error when I try to pass variables.

Here is my 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);
}

When I call it like this, it's fine (it just uses the default colors)...

.test {background: .gradient; }

But when I call it like this to change the from or to colors, I get a syntax error when compiling...

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

I've tried all different ways of writing this and am not having any luck. The LESS documentation does not help at all, it is using @arguments variable which I can't see how to use for a gradient.

I'm using the LESS compiler (from incident57) for mac, version 2.8, build 969.

Answer 1

You should be including your mixin like this:

.test {
  .gradient; 
}

The following works for me:

@blue: blue;
@red: red;

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

Codepen

More details in the parametric mixins doc

Answer 2

You have Two Main Issues

First , you are already including the background properties in your mixin, which is correct syntax, but makes it incorrect to call it like you are as the value of the property :

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

Rather, it should be like this:

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

Second , your two filter calls need to have the syntax for the variables called differently because they are nested inside of single quotes. So they should change to teh following (note the { brackets } around the name of the variables):

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