объединить значения в less (css) без пробела - PullRequest
Новая
       0

объединить значения в less (css) без пробела

28 голосов
/ 17 мая 2011

Итак, я пытаюсь создать LESS-миксин, который берет число (градусы поворота) и выводит правильный 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(@rotation+@deg); // variable-variable concatenation

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

.someElement {
    .rotate(270)
}

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

Ответы [ 4 ]

36 голосов
/ 20 мая 2011

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

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

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

24 голосов
/ 22 августа 2013

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

unit(@rotation, deg)

, который в вашем примере становится: 

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

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

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

  • размерность: число с или без размера
  • единица (опция): единица, которую нужно изменить, или, если она не указана, она удалит единицу
3 голосов
/ 07 марта 2012

Спасибо, тупик.Поскольку экранирование для 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(rotation=@{degs-ie})");
}
0 голосов
/ 13 января 2016

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

Проблема:

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

Вывод: 

content: " \2009 \2009 ";

, который добавляет дополнительное пространство на дисплей.

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

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

Вывод: 

content: "\2009\2009";

Не лучшее решение, но единственное, которое сработало в моем случае, когда я хочу читать читаемые переменные вместо экранирования Юникодаценности.Обновление: благодаря семифазным максам правильное решение НАМНОГО проще. 

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

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

...