Об'єднайте рядки менше

Я думаю, що це неможливо, але я подумав, що прошу, якщо є спосіб. Ідея полягає в тому, що у мене є змінна для шляху до папки веб-ресурсів:

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

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

Я отримую це в результаті:

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

Але я хочу, щоб рядки поєднувалися в один рядок, як це:

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

Чи можливо об'єднати рядки разом у Менше?

Використовувати змінну інтерполяцію :

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

Повний код:

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

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

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

Як видно з документації , ви можете використовувати рядкову інтерполяцію також зі змінними та простими рядками разом:

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

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

.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");
}

Для таких струнних одиничних значень, як 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);

Не знаєте, чи використовуєте ви менше.js або lessphp (наприклад, у плагіні WP-Менше для WordPress), але за допомогою меншphp ви можете "скасувати котирування" рядків за допомогою ~: http://leafo.net/lessphp/docs/#string_unquoting

Використання Drupal 7. Я використав звичайний знак плюс і працює:

@images_path+'bg.png'