Конкатенация строк в Less

Я думаю, что это невозможно, но я думал, что попрошу, если есть способ. Идея состоит в том, что у меня есть переменная для пути к папке веб-ресурса:

@root: "../img/";
@file: "test.css";
@url: @[email protected];

.px {
    background-image: url(@url);
}

Я получаю это как результат:

.px { background-image: url("../img/" "test.css"); }

Но я хочу, чтобы строки объединялись в одну строку следующим образом:

.px { background-image: url("../img/test.css"); }

Можно ли объединить строки вместе в Менее?

Ответ 1

Используйте Переменная интерполяция:

@url: "@{root}@{file}";

Полный код:

@root: "../img/";
@file: "test.css";

@url: "@{root}@{file}";

.px{ background-image: url(@url); }

Ответ 2

Как вы можете видеть в документации, вы можете использовать интерполяцию строк также с переменными и простыми строками вместе:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

Ответ 3

Я искал такой же трюк для обработки изображений. Я использовал mixin, чтобы ответить на это:

.bg-img(@img-name,@color:"black"){
    @base-path:~"./images/@{color}/";
    background-image: url("@{base-path}@{img-name}");
}

Затем вы можете использовать:

.px{
    .bg-img("dot.png");
}

или

.px{
    .bg-img("dot.png","red");
}

Ответ 4

Не знаю, используете ли вы less.js или lessphp (например, в WP-Less плагин для WordPress), но с lessphp вы можете "unquote" строки с ~: http://leafo.net/lessphp/docs/#string_unquoting

Ответ 5

Для этих значений типа строки, таких как 45deg в transform: rotate(45deg), используйте функцию unit(value, suffix). Пример:

// Mixin
.rotate(@deg) {
  @rotation: unit(@deg, deg);
  -ms-transform: rotate(@rotation);
  transform: rotate(@rotation);
}

// Usage
.rotate(45);

// Output
-ms-transform: rotate(45deg);
transform: rotate(45deg);

Ответ 6

Использование Drupal 7. Я использовал обычную знак плюса, и он работает:

@images_path+'bg.png'