Question

所以这就是我想要做的。我希望能够将一些不同的颜色和百分比作为动态长度列表发送到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吗？想法？

编辑：根据以下建议从代码中删除不必要的“”“。

Answer 1

如果我正确理解了你需要的目标是"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%, @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这样的工具（特别是因为它现在作为Less v2的插件包含在内），但我想如果你仍然能找到这样的kludge值得你自己轻松添加它。

P.S。正如以下评论中所建议的那样：background+_:);仅适用于v2（因此它更像是一种无意的虚假），更安全的语法显然是background+_: ~")";

Answer 2

你可以使用我几周前创建的mixin，...

Rotatable Multi-stop SVG linear gradient mixin 它很简单，......

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

一旦你建立了你的颜色串，例如......，

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

如果你看一下这个mixin中的代码，有一个函数可以通过循环遍历多个值来构建一个svg'colorstop'字符串。

享受！：）

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

2 个答案: