问题描述

我现在是这样做的，但我想要一个更灵活的解决方案：

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

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