Concaténer des chaînes en moins

Je pense que ce n’est pas possible, mais je pensais que je demandais au cas où il y aurait un moyen. L’idée est que j’ai une variable pour le chemin d’access au dossier de ressources Web:

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

Je reçois ceci comme résultat:

 .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 ensemble dans Less?

Utilisez l’ interpolation de variable :

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

Code complet:

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

Comme vous pouvez le voir dans la documentation , vous pouvez également utiliser l’interpolation de chaînes avec des chaînes variables et simples:

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

Je cherchais le même truc pour manipuler les images. J’ai utilisé un mixin pour répondre à ceci:

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

Ensuite, vous pouvez utiliser:

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

ou

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

Je ne sais pas si vous utilisez less.js ou lessphp (comme dans le plug – in WP-Less pour WordPress), mais avec lessphp, vous pouvez “dissocier” les chaînes avec ~ : http://leafo.net/lessphp/docs/#ssortingng_unquoting

Pour les valeurs unitaires de type chaîne telles que 45deg dans transform: rotate(45deg) utilisez la fonction unit(value, suffix) . Exemple:

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

En utilisant Drupal 7. J’ai utilisé une marque plus ordinaire et ça marche:

 @images_path+'bg.png'