css – 在动态渐变的循环中构建一个字符串

所以这就是我想要做的.我希望能够将一些不同的颜色和百分比作为动态长度列表发送到LESS循环,以创建渐变.同时,我还想添加浏览器前缀.这个请求的原因是因为我使用CSS渐变来代替图形以提高速度并最小化请求.

这就是我现在的做法,但我想要一个更好,更灵活的解决方案：

.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;
}

我用以下内容称之为：

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

它正在工作,但我希望能够将@str变量合并到上面的循环中,这样我就可以发送颜色和百分比列表,并让它循环列表以构建背景字符串.

可以这样做吗？是否有可能使用mixin？思考？

编辑：从下面的每个建议的代码中删除不必要的“”“.

解决方法

如果我正确理解了你需要的目标是 “Property Values Merge” feature,那么与某些 “Pattern-matching”优化一起,mixin可能看起来像(假设小于1.7.x或更高,但我只测试了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%,@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}
}

我没有包含任何供应商前缀,因为像Autoprefixer这样的工具(特别是因为它现在作为Less v2的插件包含在内),但我想如果你仍然能找到这样的kludge值得你自己轻松添加它.

附：正如下面的评论中所建议的那样：background _ :);仅适用于v2(因此它更像是一种无意的虚假),更安全的语法显然是背景_：〜“)”;