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

问题描述

我有一个图标精灵图像，每个图标在20 x 20像素区域中.每个图标都有几种变体(黑色，彩色，白色小号等).并拥有大量的这些.与其为每个单独的图标编写样式，不如只是在LESS文件中提供它们的名称，然后让处理器为它们生成样式.

I have icon sprites image with each icon in a 20 by 20 pixel area. Each icon has several variants (black, colour, white small etc.). And have a significant amount of them. Instead of writing styles for each individual icon I'd rather just provide their names in my LESS file and let the processor generate styles for them.

这是我想出的，但似乎不起作用.

This is what I came up with but it doesn't seem to work.

@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文件.

The only thing I'd like to edit is the @icons variable where I just enter their names. And I'm using Web Essentials addin for Visual Studio 2013 to automatically process my LESS file on file save.

我在做什么错了?

推荐答案

纯LESS(假设您正在使用使用LESS 1.5.x的Web Essentials 2013):

Pure LESS (assuming you're using Web Essentials 2013 which uses LESS 1.5.x):

@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函数)中计算数组长度，但是由于它很吓人(因此您也不需要它)，因此我不在此列出此方法.

I removed & from selector names since it has no effect when you generate these classes in the global scope (but put it back if you actually need .iconize to be nested in another ruleset). It is also possible to calculate array length in earlier LESS versions (that have no length function) w/o any javascript, but I don't list this method here since it's quite scary (and you don't need it anyway).

您基于javascript的循环实际上或多或少是正确的，但问题是LESS内联javascript返回的所有值都是所谓的匿名值"类型，而不是数字，因此when (@c < @count)条件始终为true，并且循环变为无限. (基本上将条件扩展为when (0 < ~'9') ... when (9 < ~'9') = true等.)

Your javascript based loop is in fact less or more correct but the problem is all values returned by LESS inline javascript are of so-called "anonymous value" type and not a numbers so that when (@c < @count) condition is always true and the loop becomes infinite. (basically the condition is expanded exactly as when (0 < ~'9') ... when (9 < ~'9') = true etc.)

这篇关于自动为精灵图标生成LESS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！