CODEWITHSUNDEEP
cssstylus
jhummel
jhummel

Reputation: 1764

Passing list as function arguments in Stylus

I'm trying to create a linear-gradient using Stylus and the nib extensions. If I pass in separate arguments everything works fine:

background linear-gradient( 90deg, #000 0%, #FFF 10%, #000 20% )

However, I need to build up my gradient from within a loop. I'm using a variable and just appending more values onto it:

// pseudo-code

grid = 90deg

for percent in percents
  push(grid, #000 percent)

background linear-gradient(grid)

I'm running into a problem. The linear-gradient mixin thinks the entire list is one argument, whereas it is expecting individual color stops. Is there any way to take a list in Stylus and pass it to a function as multiple arguments?

Upvotes: 0

Views: 735

Answers (1)

Panya
Panya

Reputation: 2699

linear-gradient()
  unquote('linear-gradient(' + join(', ', arguments) + ')')

percents = 10% 20% 30%

grid = 90deg

for percent in percents
  push(grid, #000 percent)

body
  background linear-gradient(grid)

EXPLANATION

Well, basically, there is two types of lists in Stylus. The first — expressions, it is a list without commas (e.g. 1 2 3) and second — lists with commas (e.g. Helvetica, Arial, sans-serif). And the second type of lists is just the first one but with isList internal flag (commas were added on the compilation phase).

Arguments of a function call it is a list of the first type. And currently there is no way to convert a list without commas to a list with commas without looping through items of that list. So, we need to output literally linear-gradient(<list of arguments with commas>), to do it we are using unquote and join built-in functions.

Upvotes: 3

Related Questions