Компилятор DotLess LessCss отличается от компилятора WebEssentials LessCss

Question

Я использую 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 для получения ожидаемого результата?

Answer 1

По 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);