LESS在动态梯度的循环中构建一个字符串 [英] LESS building a string in a loop for dynamic gradient

问题描述

所以这里是我想做的。我想能够发送几种不同的颜色和百分比作为动态长度列表，到一个LESS循环，以创建一个渐变。同时，我也想预先添加浏览器前缀。这个请求的原因是因为我使用CSS渐变代替图形速度和最小化请求。

So here's what I'm trying to do. I want to be able to send in a few different colors and percentages, as a dynamic length list, to a LESS loop, to create a gradient. At the same time, I'd also like to prepend browser prefixes. The reason for this request is because I'm using CSS gradients in place of graphics for speed and minimizing requests.

这是我现在做的， d更好，更灵活的解决方案：

Here's how I'm doing it now, but I'd like a better, more flexible solution:

.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变量合并到上述循环所以我可以发送一个颜色和百分比的列表，并让它循环列表构建一个字符串的背景。

It's working, but I'd like to be able to merge the @str variables into the above loop so I can just send in a list of colors and percentages, and have it loop the list to build out a string for the background.

这可以做吗？是可能使用mixin吗？

Can this be done? Is it possible using a mixin perhaps? Thoughts?

编辑：从以下建议的代码中删除不必要的〜。

Removed unnecessary ~"" from code per suggestion below.

推荐答案

如果我正确理解目标，您需要的是属性值合并功能因此，与某些模式匹配优化一起，mixin可以看起来像（假设Less 1.7.x或更高，但我只测试这与v2）：

If I understand the goal correctly what you need is "Property Values Merge" feature so together with certain "Pattern-matching" optimizations the mixin could look like (assuming Less 1.7.x or higher, but I tested this only with 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的插件），但我想你会很容易添加，如果你仍然发现这样的污点值得。

I did not include any vendor prefixing because of tools like Autoprefixer (especially since it's now included as a plugin for Less v2), but I guess you'll easily add that yourself if you still find such kludge worthy.

PS如下面的注释建议： background + _：）; 仅在v2中工作（因此更像是一个非预期的伪造），更安全的语法显然背景+ _：〜）;

P.S. As suggested in comments below: background+_:); works only in v2 (so it's more like an unintended bogus), more safe syntax is obviously background+_: ~")";

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