Question

我有图标精灵图像，每个图标在20 x 20像素区域。每个图标都有几种变体（黑色，彩色，白色等）。并且拥有大量的。我不是为每个单独的图标编写样式，而是在LESS文件中提供它们的名称，让处理器为它们生成样式。

这是我提出的，但它似乎不起作用。

@icons: upvote,downvote,comment,new,notify,search,popup,eye,cross;

@array: ~`(function(i){ return (i + "").replace(/[\[\] ]/gi, "").split(","); })("@{icons}")`;
@count: ~`(function(i){ return i.split(",").length; })("@{icons}")`;

.iconize (@c) when (@c < @count) {
    @val: ~`(function(a){ return a.replace(" ","").split(",")[0]; })("@{array}")`;
    @array: ~`(function(a){ a = a.replace(" ","").split(","); a.splice(0, 1); return a; })("@{array}")`;

    &.@{val} { background-position: (-20px * @c) 0; }
    &.color.@{val} { background-position: (-20px * @c) -20px; }
    &.white.@{val} { background-position: (-20px * @c) -40px; }

    .iconize(@c + 1);
}

.iconize(@c) when (@c = @count) {}

.iconize(0);

我唯一要编辑的是@icons变量，我只需输入其名称。我正在使用Visual Studio 2013的Web Essentials插件在文件保存时自动处理我的LESS文件。

我做错了什么？

Answer 1

Pure LESS（假设您使用的是使用LESS 1.5.x的Web Essentials 2013）：

@icons: upvote, downvote, comment, new, notify, search, popup, eye, cross;

.iconize();
.iconize(@i: length(@icons)) when (@i > 0) {
    .iconize((@i - 1)); 

    @value: extract(@icons, @i); // LESS arrays are 1-based
    .@{value}       {background-position: (-20px * (@i - 1)) 0}
    .color.@{value} {background-position: (-20px * (@i - 1)) -20px}
    .white.@{value} {background-position: (-20px * (@i - 1)) -40px}
}

我从选择器名称中删除了&，因为它在全局范围内生成这些类时没有任何效果（但如果实际需要.iconize嵌套在另一个规则集中，则将其放回）。在没有任何javascript的早期LESS版本（没有length函数）中计算数组长度也是可能的，但是我没有在这里列出这个方法，因为它非常可怕（并且你不需要它）反正）。

你的基于javascript的循环实际上是更正确或更正确但问题是LESS内联javascript返回的所有值都是所谓的“匿名值”类型而不是数字，因此when (@c < @count)条件始终为true循环变得无限。（基本上条件完全扩展为when (0 < ~'9') ... when (9 < ~'9') = true等。）

Answer 2

我认为这取决于您使用的LESS版本。不同版本的LESS处理数组结构和它们的长度不同。

从LESS 1.5开始，您可以使用引号定义数组，例如：

@array: "value1","value2";并使用length(@array)计算其长度。

例如，另见： Sprites LESS CSS Variable increment issue

使用LESS 1.5，您的代码以无限循环结束：“SyntaxError：超出最大调用堆栈大小”

为精灵图标自动生成LESS样式

2 个答案: