自动生成更少的精灵图标样式

Question

我有图标精灵图像与每个图标在一个20乘20像素的区域。每个图标有几个变体(黑色，颜色，白色小等)。并且有大量的。与其为每个单独的图标编写样式，我更愿意在我的较少的文件中提供它们的名称，让处理器为它们生成样式。

这是我想出来的，但似乎行不通。

@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 2013中的来自动处理文件保存中的较少文件。

我做错了什么？

Answer 1

纯粹更少(假设您使用的是使用1.5.x较少的Web 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，则将其放回原处)。在早期的更少版本(没有length函数)中也可以计算数组长度，但是我在这里没有列出这个方法，因为它非常可怕(而且您也不需要它)。

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

Answer 2

我认为这取决于你使用的更少的版本。不同版本的较少句柄数组类结构及其长度不同。

由于小于1.5，所以可以用引号定义数组，例如：

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

例如，请参见：Sprites LESS CSS Variable increment issue

在小于1.5的情况下，您的代码以一个没完没了的循环结束："SyntaxError:超过