Less CSS — framework для css. Вопрос про строки?

Question

[Yaraife]

Возможно, решение очевидно, но я его просто не вижу?


Тут описание языка: lesscss.ru/


Попрошу немного свежего взгляда на вопрос:

Как можно соединить две строки без пробела?


Пример из документации:

@var1: 1;

@var2: 2;

@var3: @var1 @var2;


В результате @var3 будет равен «1 2».

Всякие комбинации из скобок, кавычек и функции вывода без обработки e(«some text»); не дают результата.


Проверенные варианты:

@var3: @var1 @var2; // вывод: «1 2»

@var3: @var1()@var2; // ошибка

@var3: ((@var1)(@var2)); // ошибка

@var3: ( ( @var1 ) ( @var2 ) ); // «1 2»

@var3: e("") @var1 e("") @var2 e(""); // " 1 2 "

@var3: "@var1 @var2"; // "@var1 @var2"

@var3: '@var1 @var2'; // "@var1 @var2"


Варианты использования: (если вдруг у кого-то возникнет вопрос «зачем?»)

1) изменение типа, например 1px -> 1%

2) создание ссылок, например: @root/@file-name


П.С. любые варианты и теории допускаются. Возможно ваш ответ натолкнет меня на правильную мысль.

Answer 1

[Yaraife]

Ответ найден в вопросах на гитхабе.

Решение заключается в использовании функции вывода "%();", и выглядит примерно так:

@url-root: "sub.site.zone/folder/";
@url-my: "images/arrow.png";

@url-full: e(%("url(http://%s%s)", @url-root, @url-my));

Comments

[Yaraife]

На всякий случай уточню,
функция e() — это expression, позволяющий выводить строку, даже если она не валидна с точки зрения less.

Т.е. функция %() — позволяет составить строку,
А функция е() — позволяет компилятору не запороться на этой самой строке.

Answer 2

[Halfi]

Есть второй способ, если внутри надо использовать JavaScript:

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

Скомпилируется в:

@var: HELLO!;


Answer 3

[Sauron918]

Можно использовать интерполяцию:
@url: "@{url-root}@{url-my}";