LESS building a string in a loop for dynamic gradient

Question

So here's what I'm trying to do. I want to be able to send in a few different colors and percentages, as a dynamic length list, to a LESS loop, to create a gradient. At the same time, I'd also like to prepend browser prefixes. The reason for this request is because I'm using CSS gradients in place of graphics for speed and minimizing requests.

Here's how I'm doing it now, but I'd like a better, more flexible solution:

.mkgrad(@gclrs, @gdir) {
    @m:length(@list);
    .looppref(@m, @j: 1) when (@j =< @m) {
        @mypref: extract(@list, @j);
        background:~"@{mypref}-linear-gradient(@{gdir}, @{gclrs})";
        .looppref(@m, (@j + 1));
    }
    .looppref(@m);
    .mkdir() when (@gdir = left) {
        background:linear-gradient(to right, @gclrs);
    }
    .mkdir() when (@gdir = top) {
        background:linear-gradient(to bottom, @gclrs);
    }
    .mkdir;
}

I'm calling this with the following:

@str1:fade(@cgray, 50%);
@str2:fade(@cwhite, 50%);
@str3:fade(@cblack, 50%);
@glist:@str1 0%, @str2 30%, @str3 100%;
background:@str3;
.mkgrad(@glist, left);

It's working, but I'd like to be able to merge the @str variables into the above loop so I can just send in a list of colors and percentages, and have it loop the list to build out a string for the background.

Can this be done? Is it possible using a mixin perhaps? Thoughts?

EDIT: Removed unnecessary ~"" from code per suggestion below.

Answer 1

If I understand the goal correctly what you need is "Property Values Merge" feature so together with certain "Pattern-matching" optimizations the mixin could look like (assuming Less 1.7.x or higher, but I tested this only with v2):

// usage:

@gray:  #010101;
@white: #020202;
@black: #030303;

@gradients: @gray 0%, @white 30%, @black 100%;

div {
    .make-gradient(@gradients, left);
    // or just:
    // .make-gradient(@gray 0%, @white 30%, @black 100%; left);
}

// impl.:

.make-gradient(@gradients, @direction, @fade: 50%) {
    background+: ~"linear-gradient(" @dir;
    .loop(length(@gradients));
    .loop(@i) when (@i > 0) {
        .loop((@i - 1));
        @gradient: extract(@gradients, @i);
        @color:    extract(@gradient, 1);
        @stop:     extract(@gradient, 2);
        background+: fade(@color, @fade) @stop;
    }
    background+_:);

    .dir(@direction);
    .dir(@dir_) {@dir: @dir_}
    .dir(left)  {@dir: to right}
    .dir(top)   {@dir: to bottom}
}

I did not include any vendor prefixing because of tools like Autoprefixer (especially since it's now included as a plugin for Less v2), but I guess you'll easily add that yourself if you still find such kludge worthy.

P.S. As suggested in comments below: background+_:); works only in v2 (so it's more like an unintended bogus), more safe syntax is obviously background+_: ~")";

Answer 2

You could just use this mixin I created a few weeks back,...

Rotatable Multi-stop SVG linear gradient mixin It is as simple as,...

.multigradient(rgb; 168; @rgb; 2, 1);  // id; degrees; colorstring; ratio

once you've built your colorstring eg.,...

@rgb: red 0, green 50%, blue 100%;

If you look at the code in this mixin, there is a function which builds an svg 'colorstop' string by looping through multiple values.

Enjoy! :)