Concatenar cadenas en Less

129

Creo que esto no es posible, pero pensé preguntar en caso de que haya alguna manera. La idea es que tengo una variable para la ruta a la carpeta de recursos web:

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

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

Obtengo esto como resultado:

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

Pero, quiero que las cadenas se combinen en una cadena como esta:

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

¿Es posible concatenar cadenas juntas en Less?

juminoz
fuente

Respuestas:

225

Usar interpolación variable :

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

Código completo:

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

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

.px{ background-image: url(@url); }
Pablo
fuente
¡Gracias por la respuesta! Esto es perfecto. Ahora puedo asegurarme de que incluso si la ruta de contexto cambia, no habrá una pesadilla refactorizante.
juminoz
Gracias, me encontré con el mismo problema y me lo perdí en los documentos.
David
Gracias @Paulpro! Estaba teniendo un problema con el complemento VS Web Compiler, donde estaba cambiando mi url de imagen de fondo, y no estaba muy seguro de cómo hacer la concatenación :)
hatsrumandcode
66
Solo una nota para las personas que podrían llegar a esta respuesta pero están tratando de usarla, por ejemplo, para combinar una variable numérica con una cadena como pxo %: Puede ~width: ~"@{w}px";
anular
29

Como puede ver en la documentación , puede usar la interpolación de cadenas también con cadenas variables y simples juntas:

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

Estaba buscando el mismo truco para manejar imágenes. Usé un mixin para responder esto:

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

Entonces puedes usar:

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

o

.px{
    .bg-img("dot.png","red");
}
usuario2725509
fuente
¡Hola y bienvenido! ¿Por qué crees que la respuesta aceptada ya no es válida? ¿está desactualizado? ¿Ha habido una mejora tecnológica? ¿Está incorrecto? ¿Por qué el tuyo es mejor?
STT LCU
9

Para esos valores unitarios tipo cadena como 45degen transform: rotate(45deg)uso, la unit(value, suffix)función. Ejemplo:

// 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
fuente
1
Técnicamente no responde la pregunta, pero sigue siendo un truco útil.
trysis
-7

Usando Drupal 7. He usado una marca más ordinaria y está funcionando:

@images_path+'bg.png'
Gaba
fuente
55
A menos que esté dispuesto a aprender Drupal solo para que las cadenas de concat lo utilicen en MENOS / CSS, creo que su sugerencia no tiene valor. Sin ofender, solo digo.
ozanmuyes