所以这就是我想要做的.我希望能够将一些不同的颜色和百分比作为动态长度列表发送到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？思考？
解决方法
如果我正确理解了你需要的目标是
“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%,@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值得你自己轻松添加它.
附：正如下面的评论中所建议的那样：background _ :);仅适用于v2(因此它更像是一种无意的虚假),更安全的语法显然是背景_：〜“)”;
