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

Я использую 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, чтобы получить ожидаемый результат?


c# css less dotless
person Paul Fleming    schedule 28.10.2014    source источник
comment
Предполагая, что dotless просто не поддерживает интерполяцию в селекторах атрибутов: что-то вроде должен помочь, я думаю.   -  person seven-phases-max    schedule 28.10.2014
comment
также см.: github.com/dotless/dotless/issues/395   -  person Bass Jobsen    schedule 29.10.2014
comment
@seven-phases-max Это идеальное решение. Я могу подтвердить, что это работает. Пожалуйста, разместите свой комментарий как ответ, чтобы я мог проголосовать и отметить его как правильный.   -  person Paul Fleming    schedule 29.10.2014
comment
@BassJobsen Спасибо за ссылку.   -  person Paul Fleming    schedule 29.10.2014

Ответы (1)


arrow_upward
2
arrow_downward

Согласно 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);
person seven-phases-max    schedule 31.10.2014