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?

css path web less concat Juminoz
la 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
la 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
la 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
la 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
la 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
la 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
la 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

Concaténer les chaînes en moins

Réponses: