Css 较少在循环中构建字符串以实现动态渐变

这就是我要做的。我想能够发送几个不同的颜色和百分比，作为一个动态的长度列表，到一个较少的循环，以创建一个梯度。同时，我还想在浏览器前缀前加上前缀。这个请求的原因是因为我使用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;
}

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

这能做到吗？也许可以使用mixin吗？想法

---

编辑：根据下面的建议从代码中删除不必要的~如果我正确理解了目标，那么您需要的是与某些优化一起使用，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这样的工具，特别是因为它现在作为一个插件包含在更少的v2中，但我想如果你仍然觉得这样的混乱值得你自己添加

---

以下评论中建议的注意事项：背景+；只在v2中工作，所以它更像是一个无意中伪造的、更安全的语法，显然是background+\：~

如果我正确理解了目标，那么您需要的是这样的，再加上某些优化，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这样的工具，特别是因为它现在作为一个插件包含在更少的v2中，但我想如果你仍然觉得这样的混乱值得你自己添加

---

以下评论中建议的注意事项：背景+；只在v2中工作，所以它更像是一个无意中伪造的、更安全的语法，显然是background+\：~

你可以使用我几周前创建的这个mixin

它就像……一样简单

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

一旦你建立了你的彩色字符串，例如

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

如果您查看这个mixin中的代码，就会发现有一个函数通过循环多个值来构建svg“colorstop”字符串

---

享受吧

你可以使用我几周前创建的这个mixin

它就像……一样简单

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

一旦你建立了你的彩色字符串，例如

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

如果您查看这个mixin中的代码，就会发现有一个函数通过循环多个值来构建svg“colorstop”字符串

---

享受吧

好主意，伙计。但这种背景；如果未在~like background+u551;：~；中包装，则给出编译器错误；。我正在使用lesstester.com v.1.7.0进行测试。做得好。当你开始少编码时，可能不容易理解。您也可以使用背景+\：~；而不是背景+u：；。你不能使用+:，+:{和+:}，但可以使用+:}，这可能是正确和有效的，但感觉不一致，这实际上与我发布的内容没有太大区别。我为自己在编码时使用尽可能少的行而自豪，在保持灵活性的同时消除了不必要的冗余。我确实使用了您编写的一些内容，但是在代码中不需要循环本身，因为@gradients字符串在后台已经完成。我只是用我的循环作为前缀。我使用的是v.1.7.3版本，使用npm安装。关于如何升级它有点模糊。这实际上与我发布的没有太大区别。-我说过这是完全不同的，或者我只是想把@str变量完全错误地合并到上面的循环中。我为自己使用尽可能少的行而感到自豪-顺便说一句。在这种情况下，你真的应该学会如何不使用~-在你的原始代码片段中过度使用这些hacks~除了{mypref}之外，其他地方都不需要-线性梯度让我流血。好主意，伙计。但这种背景；如果未在~like background+u551;：~；中包装，则给出编译器错误；。我正在使用lesstester.com v.1.7.0进行测试。做得好。当你开始少编码时，可能不容易理解。您也可以使用背景+\：~；而不是背景+u：；。你不能使用+:，+:{和+:}，但可以使用+:}，这可能是正确和有效的，但感觉不一致，这实际上与我发布的内容没有太大区别。我为自己在编码时使用尽可能少的行而自豪，在保持灵活性的同时消除了不必要的冗余。我确实使用了您编写的一些内容，但是在代码中不需要循环本身，因为@gradients字符串在后台已经完成。我只是用我的循环作为前缀。我使用的是v.1.7.3版本，使用npm安装。关于如何升级它有点模糊。这实际上与我发布的没有太大区别。-我说过这是完全不同的，或者我只是想把@str变量合并到上面的循环中，这完全是错误的。我为自己使用尽可能少的行而自豪——顺便说一句，在这里 s context你真的应该学会如何不使用~-在你的原始代码片段中过度使用那些黑客~~除了@{mypref}之外，任何地方都没有必要使用~-线性梯度让我流血。