如何在循环中为动态渐变构建字符串？ [英] How can I build a string in a loop for a dynamic gradient?

问题描述

我希望能够将几种不同的颜色和百分比作为动态长度列表发送到较少的循环中，以创建渐变。同时，我还想加上浏览器前缀。提出此请求的原因是，我使用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变量合并到上面的循环中，这样我就可以发送一个颜色和百分比列表，并让它循环列表以构建背景字符串。

这能做到吗？或许可以使用混合剂吗？

推荐答案

如果我正确理解目标，您需要的是"Property Values Merge" feature以及某些"Pattern-matching"优化(假设低于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%, @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}
}

我没有包括任何供应商前缀，因为有像Autoprefixer这样的工具(特别是因为它现在作为低于v2版本的插件包含在内)，但是我想如果您仍然觉得这样的杂乱无章值得您自己添加的话，那么您可以很容易地添加它。

附注：background+_:);只适用于v2(所以更像是无意的伪装)，更安全的语法显然是background+_: ~")";

这篇关于如何在循环中为动态渐变构建字符串？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！