How to pass a comma-separated list to a mixin as a single argument

Question

I made a multi-stop gradient mix-in that simply puts @arguments for all the vendor prefixes for *-linear-gradient. It works, put I'm annoyed when I define a gradient with many stops, I have to put everything on one line when using the mixin, like this:

.gradientMultiple(~'top, rgba(255, 255, 255, 1) 0%, rgba(254, 254, 254, 1) 16%, rgba(252, 252, 252, 1) 36%, rgba(239, 239, 239, 1) 66%, rgba(18, 34, 106, 1) 66%, rgba(13, 31, 136, 1) 84%');

I'd like to put the function parameter on multiple lines like this for readability, but it generates a parse error:

.gradientMultiple(~'top, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(254, 254, 254, 1) 16%, 
    rgba(252, 252, 252, 1) 36%, 
    rgba(239, 239, 239, 1) 66%, 
    rgba(18, 34, 106, 1) 66%, 
    rgba(13, 31, 136, 1) 84%
');

Here's the mixin definition:

.gradientMultiple ( ... ) {
      background-image: -webkit-linear-gradient(@arguments);
      background-image: -moz-linear-gradient(@arguments);
      background-image: -ms-linear-gradient(@arguments);
      background-image: -o-linear-gradient(@arguments);
      background-image: linear-gradient(@arguments);
   }

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

.gradientMultiple(top,
    rgba(255, 255, 255, 1)  0%,
    rgba(254, 254, 254, 1) 16%,
    rgba(252, 252, 252, 1) 36%,
    rgba(239, 239, 239, 1) 66%,
    rgba( 18,  34, 106, 1) 66%,
    rgba( 13,  31, 136, 1) 84%;);

Also see:

0
1
2
and finally the lead remark of 3

edited May 23 '17 at 10:25

Community

1
1

answered Jan 13 '14 at 21:12

seven-phases-max

11,765
1
45
57

dwelle · Answer 2 · 2017-07-16T17:59:47.693

-1

For use cases when the mixin forces you to supply a string, or you don't want LESS to compute the argument value, you can use a bit of javascript:

(disclaimer: JS evaluation is now deprecated and possibly will be removed in LESS 3/4, so use this only when working with legacy code where no other alternative is available)

.keyframes(~`
    "translate, " +
    "50% { transform: translateX(calc(50% - 25px)) } " +
    "100% { transform: translateX(0px) } "
`);

edited Jul 16 '17 at 17:59

answered Jul 16 '17 at 11:27

dwelle

6,894
2
46
70

See my answer above, the mixin takes *the only* argument not multiple. [Demo](http://less2css.org/#%7B%22less%22%3A%22foo%20%7B%5Cn%20%20%20%20.gradient(top%2C%5Cn%20%20%20%20%20%20%20%20rgba(255%2C%20255%2C%20255%2C%201)%20%200%25%2C%5Cn%20%20%20%20%20%20%20%20rgba(%2018%2C%20%2034%2C%20106%2C%201)%2066%25%2C%5Cn%20%20%20%20%20%20%20%20rgba(%2013%2C%20%2031%2C%20136%2C%201)%2084%25%3B)%3B%5Cn%7D%5Cn%5Cn.gradient(%40value)%20%7B%5Cn%5Ctbackground-color%3A%20%40value%3B%20%20%5Cn%7D%22%7D). – seven-phases-max Jul 16 '17 at 12:27
Besides, the OP is about splitting (escaped) _strings_. – dwelle Jul 16 '17 at 12:42
That's actually the point, you don't need any *strings* or escaping for this use-case *at all*. – seven-phases-max Jul 16 '17 at 13:38
*See the edit* - you're trying to push an artificial example to justify the crappy-escaped-js hacks - there *are* certain rare/ege cases where you need the inline-js, but passing *any* args to mixins is not one of them (so you're just quickly running out of the scope of the Q). – seven-phases-max Jul 16 '17 at 13:42
For instance your edited snipped is done in normal Less [like this](http://less2css.org/#%7B%22less%22%3A%22.keyframes(highlight%2C%20%7B%5Cn%20%20%20%200%25%20%20%20%7Bbackground-color%3A%20transparent%7D%5Cn%20%20%20%2050%25%20%20%7Bbackground-color%3A%20red%7D%5Cn%20%20%20%20100%25%20%7Bbackground-color%3A%20transparent%7D%5Cn%7D)%3B%5Cn%5Cn.keyframes(%40name%2C%20%40value)%20%7B%5Cn%20%20%20%20%40keyframes%20%40name%20%7B%5Cn%20%20%20%20%20%20%20%20%40value()%3B%5Cn%20%20%20%20%7D%5Cn%7D%22%7D) - no need for js-hacks as well. – seven-phases-max Jul 16 '17 at 13:47
For instance, no, __it isn't__ coz lesshat [keyframes](https://github.com/madebysource/lesshat/tree/master/mixins/keyframes) mixin doesn't allow that. Even if it did, there are still valid cases where you simply don't want LESS to calculate the result, and your editing the OP title to justify your innate anti-JS bias won't change that. I changed the expression nonetheless to make it less triggering to you. – dwelle Jul 16 '17 at 14:43
*lesshat* - and what does all this have to do with lesshat at all? (For your reference `lesshat` was abandoned a while ago exactly because there's no need in its ugly hacks these days. So if you're still using it - wake up). – seven-phases-max Jul 16 '17 at 14:47
exactly nothing, so why do you insist on concrete examples instead of simply solving the problem which is to split the string. Let the developer decide what use case it'll be used for. – dwelle Jul 16 '17 at 14:53
No, it's you missing the XY-problem here. I.e. instead of solving the problem itself you're pushing the hack to fix the issues of the wrong method the OP tried to solve his initial problem. *your innate anti-JS* - don't be ridiculous (and discover Less plugins to find the right way of using JS within Less. There *are* reasons the inine-js feature will be disabled by default in next major Less version - you are still free to using that yourself but be prepared to be criticized by others for pushing any ancient hacks). – seven-phases-max Jul 16 '17 at 14:59

How to pass a comma-separated list to a mixin as a single argument

2 Answers2