CODEWITHSUNDEEP
less
mpen
mpen

Reputation: 283173

less @arguments with linear-gradients (commas)

On their site, they give an example of how to use @arguments:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

Which results in:

box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

It appears it just takes all the arguments and separates them with spaces. I actually want the arguments separated by commas for use with linear-gradient:

background: linear-gradient(top, @arg1, @arg2, @arg3...);

Is this possible with less?

Upvotes: 3

Views: 729

Answers (2)

noel
noel

Reputation: 2155

Inspired by @Allan's answer, I had to use the following to get @arguments passed to a linear gradient function:

.linear-gradient-multi( ... ) {
   background-image: -webkit-linear-gradient( ~`"@{arguments}".slice(1,-1)` );
   ...
}

Only then could I call the mixin with percentages and variables:

.linear-gradient-multi(left, #CCC 0%, #DDD @percent, #FFF @percent + 1, #FFF 100%);

Upvotes: 3

Allen Bargi
Allen Bargi

Reputation: 15170

You can do something like this

.mixin(...) {
  filter: gradient( ~`@{arguments}.join(",")` );
}

test {
 .mixin("x1","x2","x3")
}

You should use back-ticks to be able to run some javascript. but that means that all elements inside the arguments array should be valid javascript variables, that's why when calling the mixin you should wrap all the arguments in quotes to make them javascript strings. the above code will be compiled to: 

test {
 filter: gradient(x1,2,3);
}

Upvotes: 2

Related Questions