Concaténer les chaînes en moins

129

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 d'accès au dossier de 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 ensemble dans Less?

— Juminoz
source

225

Utilisez l' interpolation variable :

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

Code complet:

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

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

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

— Paul
source

Merci d'avoir répondu! C'est parfait. Maintenant, je peux m'assurer que même si le chemin du contexte change, il n'y aura pas de cauchemar de refactoring.

— juminoz

Merci, je viens de rencontrer le même problème et je l'ai manqué dans la documentation.

— David

Merci @Paulpro! J'avais un problème avec l'add-on VS Web Compiler, où il changeait l'URL de mon image d'arrière-plan, et je ne savais pas trop comment faire la concaténation :)

— hatsrumandcode

6

Juste une note pour les personnes qui pourraient atterrir sur cette réponse mais qui essaient de l'utiliser, par exemple pour combiner une variable numérique avec une chaîne comme pxou %: Vous pouvez annuler les guillemets de la chaîne en la pré-attendant avec un tilde ~, comme tel:width: ~"@{w}px";

— AsGoodAsItGets

29

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

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

— Stéphan Hoyer
source

12

Je cherchais la même astuce pour gérer 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");
}

— user2725509
source

Bonjour et bienvenue! pourquoi pensez-vous que la réponse acceptée n'est plus valable? est-ce obsolète? y a-t-il eu une amélioration technologique? C'est faux? pourquoi le vôtre est meilleur?

— STT LCU

9

Pour les valeurs unitaires semblables 45degà des chaînes, transform: rotate(45deg)utilisez la unit(value, suffix)fonction. 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);

— Jordanb
source

1

Ne répond pas techniquement à la question, mais reste une astuce utile.

— trysis le

7

Je ne sais pas si vous utilisez less.js ou lessphp (comme dans le plugin WP-Less pour WordPress) mais avec lessphp vous pouvez "déquoter" les chaînes avec ~: http://leafo.net/lessphp/docs/#string_unquoting

— FelipeAls
source

1

Cela fonctionne également avec LESS régulier. Je ne sais pas si c'était le cas en 2012 lorsque cette réponse a été rédigée.

— trysis le

-7

En utilisant Drupal 7. J'ai utilisé une marque plus ordinaire et cela fonctionne:

@images_path+'bg.png'

— Gaba
source

5

À moins qu'il n'apprenne volontairement Drupal juste pour que les chaînes concat l'utilisent en LESS / CSS, je pense que votre suggestion ne vaut rien. Aucune offense, je dis juste.

— ozanmuyes