объединить значения в меньшем (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(@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)
}

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


css less
person B T    schedule 17.05.2011    source источник
comment
Почему бы не назвать это так: .rotate(270deg)? Это из-за IE?   -  person cloudhead    schedule 20.05.2011
comment
Да, это причина IE   -  person B T    schedule 20.05.2011
comment
Из интереса, в чем реальное преимущество LESS, кажется, что на самом деле не так много разницы в длине кода. Некоторые функции кажутся избыточными, так как большинство стилей, над которыми я работаю, не являются динамическими. Я вижу, что изменение значения цвета в одном месте было бы неплохо, но поиск и замена выполняет эту редкую работу по редактированию без добавления какой-либо (кажущейся ненужной) загрузки JavaScript.   -  person addedlovely    schedule 21.05.2011
comment
Если вы используете CSS для чего-либо, кроме самых основных стилей, вы быстро обнаружите, что он почти не использует преимущества симметрии кода/стиля и заставляет вас создавать сложные в сопровождении стили, особенно если у вас есть стили, которые зависят от друг друга (допустим, вы хотите, чтобы цвет одного элемента был немного темнее, чем у другого элемента, или вам нужны соответствующие размеры шрифта, позиционирование и т. д.). Если параметризованные миксины, такие как .rotate, который я написал выше, не вызывают у вас интереса, возможно, материал, над которым вы работаете, настолько прост, что вам не нужно беспокоиться о ремонтопригодности.   -  person B T    schedule 22.05.2011
comment
О, также я использую less.php - так что вообще не загружается javascript. The less переводится в css, кэшируется и отправляется браузеру по запросу как обычный css. Кроме того, с less.php @imports в less все переводятся в один файл css, поэтому вы не получаете цепочку импорта, когда вашему браузеру необходимо запрашивать каждый связанный импорт по отдельности. Это снижает как нагрузку, так и задержку.   -  person B T    schedule 22.05.2011
comment
вместо конкатенации используйте математику: -webkit-transform(@rotation * 1deg). В моем собственном проекте я потратил около 30 минут, пытаясь понять, как соединить @num с %, и меня просто осенило. просто умножьте @num * 1%!!   -  person chharvey    schedule 01.03.2014

Ответы (4)


arrow_upward
37
arrow_downward

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

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

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

person cloudhead    schedule 20.05.2011
comment
Мне кажется не так уж плохо. Прямо изо рта лошади. - person B T; 20.05.2011
comment
О, но less.php не поддерживает экранированные значения, поэтому я пока останусь со своим решением. Я думаю ... побочный вопрос: почему конкатенация, такая как @степени + градус, ставит между ними пробел? Я думаю, было бы лучше сказать, что @x: X; @x+something выведет Xsomething, а затем @x+ something выведет X something. Тогда у вас нет этого странного ограничения - person B T; 20.05.2011
comment
x + y на самом деле не определено языком, когда x и y не являются обеими переменными, содержащими числа, или буквальными числами. deg сам по себе рассматривается как символ, такой как normal, bold и т. д., и они всегда стоят сами по себе. Так что в данном случае a + deg — это то же самое, что и a deg. + просто игнорируется языком. - person cloudhead; 20.05.2011
comment
Превосходно. Это именно то, что я искал. Спасибо. - person Glen Balliet; 03.08.2011

arrow_upward
26
arrow_downward

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

unit(@rotation, deg)

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

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

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

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

  • размер: число, с размером или без него
  • единица измерения (необязательно): единица измерения, на которую необходимо перейти, или, если она опущена, она удалит единицу измерения.
person sqren    schedule 22.08.2013
comment
Это должен быть утвержденный ответ. - person lawrence; 01.04.2015
comment
спасибо за объяснение по удалению единиц. Теперь я могу складывать единицы вместе :) - person guy_m; 12.07.2015
comment
Лучший ответ. Можете дать ссылку на документы? Ваше решение работает, но я не смог найти ссылку в документации. - person Vlad T.; 11.12.2015
comment
Я добавил ссылку на документацию: lesscss.org/functions/#misc-functions- единица - person sqren; 11.12.2015
comment
Это тот, который работал! Спасибо. Проголосовал. - person Deviance; 18.08.2020

arrow_upward
3
arrow_downward

Спасибо, облачная голова. Поскольку экранирование для 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})");
}
person Ti Hausmann    schedule 07.03.2012
comment
Это спасло мою задницу. Спасибо! e() за победу! - person Kevin Beal; 08.07.2013

arrow_upward
0
arrow_downward

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

Проблема:

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

Выход:

content: " \2009 \2009 ";

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

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

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

Вывод:

content: "\2009\2009";

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

Обновление: благодаря семифазному максу правильное решение НАМНОГО проще.

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

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

person millebi    schedule 13.01.2016
comment
Во-первых, какое отношение ваш ответ имеет к вопросу? В любом случае см. демонстрация. Так что это просто вы используете неправильный код, извините. - person seven-phases-max; 14.01.2016
comment
Было бы замечательно, если бы в документации упоминалась эта опция!! Спасибо за исправление, это гораздо лучшее решение! - person millebi; 15.01.2016