Concatena le stringhe in Less

Penso che questo non sia possibile, ma ho pensato di chiedere in caso ci fosse un modo. L'idea è che ho una variabile per il percorso della cartella delle risorse Web:

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

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

Ottengo questo come risultato:

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

Ma voglio che le stringhe si combinino in una stringa come questa:

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

È possibile concatenare le stringhe insieme in Meno?

Usa interpolazione variabile :

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

Codice completo:

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

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

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

Come puoi vedere nella documentazione , puoi usare l'interpolazione di stringhe anche con stringhe variabili e semplici insieme:

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

Stavo cercando lo stesso trucco per la gestione delle immagini. Ho usato un mixin per rispondere a questo:

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

Quindi puoi usare:

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

o

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

Per quei valori unitari simili 45dega stringhe come in transform: rotate(45deg)uso la unit(value, suffix)funzione. Esempio:

// 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);

Non so se stai usando less.js o lessphp (come nel plugin WP-Less per WordPress) ma con lessphp puoi "annullare la quotazione" delle stringhe con ~: http://leafo.net/lessphp/docs/#string_unquoting

Uso di Drupal 7. Ho usato un normale segno più e funziona:

@images_path+'bg.png'