DotLess LessCss编译器与WebEssentials LessCss编译器不同 [英] DotLess LessCss compiler is different to WebEssentials LessCss compiler
问题描述
我在运行时使用无点解析LessCss.这通常是成功的,但我遇到了一种无法按预期工作的情况.
I'm using dotless to parse LessCss at runtime. This is mostly successful but I have one scenario where it doesn't work as intended.
给出以下LessCss:
Given the following 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 Update 3将编译为:
WebEssentials 2013 Update 3 will compile to:
[data-col="2"] {
left: 65px;
}
[data-col="1"] {
left: 5px;
}
LessEngine.TransformToCss将输出:
LessEngine.TransformToCss will output:
[data-col="@{maxIndex}"] {
left: 65px
}
[data-col="@{maxIndex}"] {
left: 5px
}
DotLess不支持此语法吗?
如何更改Less代码以获得预期的输出?
Is this syntax not supported in DotLess?
How can I alter the Less code to get my expected output?
推荐答案
根据 https://github.com/dotless/dotless/issues/395 dotless
只是不支持属性选择器中的插值,因此您只需要隐藏"变量中的属性即可,例如:
According to https://github.com/dotless/dotless/issues/395 dotless
just does not support interpolation in attribute selectors so you need just "hide" the attribute in a variable, e.g.:
@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);
这篇关于DotLess LessCss编译器与WebEssentials LessCss编译器不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!