Объединить значения меньше (css) без пробела

Итак, я пытаюсь сделать LESS mixin, который принимает число (градусов для поворота) и выводит правильный css для поворота элемента. Проблема в том, что я не могу найти способ написать как "270deg", так и "3" (270/90) для IE. Вот что я пробовал:

.rotate(@rotation: 0) {
    @deg: deg;
    -webkit-transform: rotate(@rotation deg); // i can see why this doesn't work
    -moz-transform: rotate((@rotation)deg); // parens
    -o-transform: rotate(@rotation+deg); // variable-keyword concatenation
    transform: rotate(@[email protected]); // variable-variable concatenation

    // this is the reason I need @rotation to be just a number:
    filter: progid:DXImageTransform.Microsoft.BasicImage([email protected]/90);
}

.someElement {
    .rotate(270)
}

Теперь я только что изменил компилятор script, чтобы он не помещал пробел между конкатенацией переменных/ключевых слов. Я надеюсь, что это лучшее решение.

Ответ 1

Одним из решений, хотя и немного уродливым, было бы использование экранированных строк:

@degs: ~"@{rotation}deg"
@degs-ie: @rotation / 90;
transform: rotate(@degs);
filter: ~"DXImageBlahBlah([email protected]{degs-ie})"

Обратите внимание, что для этого вам нужно less.js v1.1.x.

Ответ 2

Более чистый подход заключается в использовании unit (официальной документации):

unit(@rotation, deg)

который в вашем примере будет выглядеть следующим образом:

transform: rotate(unit(@transition, deg));

Документация:

единица измерения (единица измерения, единица измерения)

dimension: число, с или без измерения
unit (необязательно): устройство для изменения или если оно опущено, оно удалит блок

Ответ 3

Спасибо, облако. Поскольку ускорение для LESS PHP немного отличается, это то, что сработало для меня:

.rotation(@rotation:90){
  @degs: e("@{rotation}deg");
  @degs-ie: @rotation / 90;

  -webkit-transform: rotate(@degs);
  -moz-transform: rotate(@degs);
  transform: rotate(@degs);
  filter: e("progid:DXImageTransform.Microsoft.BasicImage([email protected]{degs-ie})");
}

Ответ 4

Для тех, кто нашел этот старый элемент о конкатенации без пробелов, в LESS # 1375 (открыта в 2013 году, незафиксирована по состоянию на январь 2016 года) есть запрос об ошибке/функции, который описывает проблему.

Проблема:

@CharTinySpace: \\2009;
content: "@[email protected]";

Вывод:

content: " \2009 \2009 ";

Что добавляет дополнительное пространство для отображения.

~~Решением может быть использование встроенной замены JavaScript:~~

@CharTinySpace: \\2009;
content: `"@{CharTinySpace}@{CharTinySpace}".replace(/ /g,"")`;

Вывод:

content: "\2009\2009";

Не лучшее решение, но единственное, что работало в моем экземпляре, где я хочу считываемые переменные вместо unicode escape-значений.

Обновление: благодаря семифазам-max правильное решение намного проще.

@CharTinySpace: \\2009;
content: "@{CharTinySpace}@{CharTinySpace}";

Я оставляю это здесь, если опция JavaScript является полезной подсказкой для будущих первооткрывателей.