自動生成精靈圖標的較少樣式

我有一個圖標精靈圖像，每個圖標在20乘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}")`; 

    &[email protected]{val} { background-position: (-20px * @c) 0; } 
    &[email protected]{val} { background-position: (-20px * @c) -20px; } 
    &[email protected]{val} { background-position: (-20px * @c) -40px; } 

    .iconize(@c + 1); 
} 

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

.iconize(0);

我想編輯的唯一的事情是@icons變量，我只需輸入他們的名字。我正在使用Visual Studio 2013的Web Essentials插件來自動處理文件保存時的LESS文件。

我在做什麼錯？

來源

2013-12-16 Robert Koritnik

純以下（假設你使用的Web要點2013使用較少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 
    [email protected]{value}  {background-position: (-20px * (@i - 1)) 0} 
    [email protected]{value} {background-position: (-20px * (@i - 1)) -20px} 
    [email protected]{value} {background-position: (-20px * (@i - 1)) -40px} 
}

我刪除從選擇名稱&因爲它在生成在全球範圍內這些類沒有影響（但把它放回去，如果你ACTU同盟需要.iconize嵌套在另一個規則集中）。也可以在早期的LESS版本（沒有length函數）中計算數組長度，而不使用任何javascript，但是我不在這裏列出這個方法，因爲它非常可怕（無論如何你都不需要它）。

基於

您的JavaScript循環其實更少或更多正確的，但問題是JavaScript的是所謂的「匿名值」類型和LESS在線返回的所有值不是一個號碼，這樣when (@c < @count)條件始終爲真循環變得無限。（基本上條件完全擴展爲when (0 < ~'9') ... when (9 < ~'9') = true等）

來源

2013-12-16 10:36:48

是我的類嵌套在所以我需要'＆'。並感謝這個解決方案，因爲它能夠完美地按照我的要求工作。我覺得很奇怪，雖然官方的LESS.org文檔沒有提及任何有關「長度」或「提取」功能的內容。有更好的文檔網站嗎？ –

是的，更好的文檔正在處理中：https：//github.com/less/less-docs（最新的[函數參考]（https://github.com/less/less-docs/tree/） master/content/functions）） –

@Robert我更新了一個更聰明的'.iconize' arg處理示例，這樣每次使用'.iconize'時都不必重複'@icons'。 –

我認爲這取決於您使用的版本。不同版本的LESS處理數組結構和它們的長度不同。

由於較少的1.5可以用引號定義一個數組，如：

@array: "value1","value2";和計算與length(@array)其長度。

例如見： Sprites LESS CSS Variable increment issue

用更少的1.5代碼中的無限循環結束：「語法錯誤：在超過最大調用堆棧大小」

來源

2013-12-16 09:18:53

自動生成精靈圖標的較少樣式

回答

相關問題