DotLess LessCss編譯器不同於WebEssentials LessCss編譯器

我在運行時使用dotless來解析LessCss。這主要是成功的，但我有一個場景，它不能按預期工作。DotLess LessCss編譯器不同於WebEssentials LessCss編譯器

鑑於以下LessCss：

@tileWidth: 50px; 
@tileMarginX: 5px; 
@gridWidth: 2; 

// recursive less to generate all x positions down to 1 
.position-x(@maxIndex) when (@maxIndex > 0) { 
    [data-col="@{maxIndex}"] { 
     left: ((@maxIndex - 1) * @tileWidth) + (@tileMarginX * ((@maxIndex * 2) - 1)); 
    } 

    .position-x(@maxIndex - 1); 
} 

.position-x(@gridWidth);

WebEssentials 2013更新3將編譯爲：

[data-col="2"] { 
    left: 65px; 
} 
[data-col="1"] { 
    left: 5px; 
}

LessEngine.TransformToCss將輸出：

[data-col="@{maxIndex}"] { 
    left: 65px 
}  
[data-col="@{maxIndex}"] { 
    left: 5px 
}

這是語法不支持在DotLess中？
如何更改Less代碼以獲得預期輸出？

來源

2014-10-28 Paul Fleming

假設'dotless'只是不支持插值屬性選擇：像[這]（https://gist.github.com/seven-phases-max/6d1bc5483f43de3088b8#file-26615585-無）應該做的伎倆，我猜。 – 2014-10-28 19:38:18

另請參閱：https://github.com/dotless/dotless/issues/395 – 2014-10-28 21:19:27

@ seven-phases-max這是一個完美的解決方案。我可以證實它的作品。請將您的評論作爲答案，以便我可以upvote並標記爲正確。 – 2014-10-29 08:55:20

根據https://github.com/dotless/dotless/issues/395dotless只是不支持插在屬性選擇，所以你只需要「隱藏」在一個變量屬性，如：

@tileWidth: 50px; 
@tileMarginX: 5px; 
@gridWidth: 2; 

.position-x(@n) when (@n > 0) { 
    @attr: ~'[data-col="@{n}"]'; 
    @{attr} { 
     left: (@n - 1) * @tileWidth + (2 * @n - 1) * @tileMarginX; 
    } 

    .position-x(@n - 1); 
} 

.position-x(@gridWidth);

來源

2014-10-31 01:45:45

DotLess LessCss編譯器不同於WebEssentials LessCss編譯器

回答

相關問題