Concaténation de chaînes de caractères dans LESS

Question

Je pense que ce n'est pas possible, mais j'ai pensé demander au cas où il y aurait un moyen. L'idée est que j'ai une variable pour le chemin vers le dossier des ressources web :

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

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

J'obtiens ceci en conséquence :

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

Mais, je veux que les chaînes se combinent en une seule chaîne comme ceci :

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

Est-il possible de concaténer des chaînes de caractères dans LESS ?

Answer 1

Utilice Interpolation variable :

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

Code complet :

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

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

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

Answer 2

Comme vous pouvez le voir dans le documentation Vous pouvez également utiliser l'interpolation de chaînes de caractères avec des chaînes de caractères variables et simples :

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

Answer 3

Je cherchais la même astuce pour la manipulation des images. J'ai utilisé un mixin pour répondre à cette question :

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

Vous pouvez alors utiliser :

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

o

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

Answer 4

Je ne sais pas si vous utilisez less.js ou lessphp (comme dans Sans WP pour WordPress) mais avec lessphp, vous pouvez "décoter" les chaînes de caractères avec ~ : http://leafo.net/lessphp/docs/#string_unquoting

Answer 5

Utilisation de Drupal 7. J'ai utilisé un signe plus ordinaire et cela fonctionne :

@images_path+'bg.png'