DotLess LessCss 编译器与 WebEssentials LessCss 编译器不同答案

【问题标题】：DotLess LessCss compiler is different to WebEssentials LessCss compilerDotLess LessCss 编译器与 WebEssentials LessCss 编译器不同
【发布时间】：2014-10-31 10:40:32
【问题描述】：

我在运行时使用 dotless 来解析 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 Update 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 代码以获得预期的输出？

【问题讨论】：

假设 dotless 只是不支持属性选择器中的插值：我猜像 this 这样的东西应该可以解决问题。
另见：github.com/dotless/dotless/issues/395
@seven-phases-max 这是一个完美的解决方案。我可以确认它有效。请将您的评论作为答案，以便我投票并标记为正确。
@BassJobsen 感谢您的链接。

标签： c# css less dotless

【解决方案1】：

根据https://github.com/dotless/dotless/issues/395 dotless 只是不支持属性选择器中的插值，因此您只需“隐藏”变量中的属性，例如：

@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);

【讨论】：