css - How can I build a string in a loop for a dynamic gradient?

Question

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 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?

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+_: ~")";