Конкатенация строки и var меньше css

Может ли кто-нибудь рассказать мне, как конкатенировать var и строку в LESS, чтобы у меня не было места между ними?

У меня есть следующий код:

.text(@size) {
    font-size: @size + px;
    line-height: (@size / 10) + em;
}

h1 {
   .text(16)
}

Что означает выходы LESS:

h1 {
    font-size: 12 px;
    line-height: 1.2 em;
}

Мне нужно найти способ удаления пробелов.

Спасибо Пит

Ответ 1

Если кто-нибудь из поздних пришедших найдет эту тему:

Для этого есть встроенная функция:

unit(@dimension, [@unit: ""]);

Итак, font-size: unit(@size, px); должно привести к font-size: 12px. Я протестировал его.

http://lesscss.org/#reference

Ответ 2

U может использовать что-то вроде этого:

.text(@size) {
    @lineheight: @size / 10;
    font-size: ~"@{size}px";
    line-height: ~"@{lineheight}em";
}

Но на lesscss.org это: до менее 1.3.1 был поддержан тип селектора (~ "@{name}" ). Поддержка этого будет удалена в ближайшем будущем.

Я думаю, что другой способ решения невозможен.

Ответ 3

Я думаю, что самый чистый способ (без интерполяции строк) - добавить 0px к вашей переменной, например. @size + 0px.

Ответ 4

вот как я недавно решил аналогичную проблему.

.text(@size: 10) {
  font-size: e(%("%dpx", @size));
  line-height: e(%("%dem", @size/10));
}

Функция% ( "string", value) просто форматирует строку, и поэтому она принимает% d внутри строки и преобразует ее во все значение. пример здесь: http://cdpn.io/hAbwl

Надеюсь, это поможет.

Ответ 5

В случае, если вам нужно использовать его в сочетании с функцией CSS (например, calc), вот один из способов:

@width: 12;
width: %(~"calc(33%% - %dpx)", @width);

Выходы:

width: calc(33% - 12px);

Ответ 6

Меньше заменяет ничего, кроме значений с пробелами, поэтому для преобразования единиц вы добавляете 0 этого устройства. Просто не передавайте значение единицы.

.my_mixin(@num) {
 @result: @num / 16; //12 / 16
 font-size: @result + 0em; //0.750em
}

p {
 .my_mixin(12);
}

Надеюсь, это поможет кому-то еще.