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

【问题标题】：Auto-generate LESS styles for sprite icons为精灵图标自动生成 LESS 样式
【发布时间】：2013-12-16 07:52:03
【问题描述】：

我有图标精灵图像，每个图标在 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 文件。

我做错了什么？

【问题讨论】：

标签： less auto-generate

【解决方案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) 条件始终为真，并且循环变得无限。（基本上条件扩展为when (0 < ~'9') ... when (9 < ~'9') = true 等）

【讨论】：

是的，我的课程嵌套在其中，所以我需要&。并感谢此解决方案，因为它可以按我的意愿完美运行。虽然官方 LESS.org 文档没有谈论 length 或 extract 函数，但我觉得很奇怪。有没有更好的文档网站？
是的，更好的文档正在准备中：github.com/less/less-docs（最新的functions ref）
@Robert 我用更智能的.iconize arg 处理更新了示例，这样您就不必每次使用.iconize 时都重复length(@icons)。
谢谢，但无论如何我只调用一次。不过，我还更改了一些其他内容：背景位置计算，因为 @i 介于 1 和 length(@icons) 之间。我从中减去了 1，所以偏移量是正确的。
啊，是的，我确实错过了基于 0 与基于 1 的部分......所以我也会用它来更新示例......

【解决方案2】：

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

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

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

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

在 LESS 1.5 中，您的代码以无限循环结束：“SyntaxError: Maximum call stack size exceeded in”

【讨论】：