Cadenas de concatenación en Menos

116

Creo que esto no es posible, pero pensé que preguntaría en caso de que hubiera alguna manera. La idea es que tengo una variable para la ruta a la carpeta de recursos web:Cadenas de concatenación en Menos

@root: "../img/"; 
@file: "test.css"; 
@url: @[email protected]; 

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

consigo esto como resultado:

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

Pero, quiero que las cadenas de combinar en una sola cadena como esta:

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

¿Es posible concatenar cadenas en menos?

Fuente

2012-04-21 juminoz

201

Uso Variable Interpolation:

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

código completo:

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

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

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

Fuente

2012-04-21 05:18:39 Paulpro

¡Gracias por la respuesta! Esto es perfecto. Ahora puedo asegurarme de que incluso si la ruta de contexto cambia, no habrá una pesadilla de refactorización. – juminoz

Gracias, acabo de encontrar el mismo problema y 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 :) –

No sabe si está usando o less.js lessphp (como en WP-Less plug-in para WordPress) pero con lessphp se puede " comillas "cadenas con ~: http://leafo.net/lessphp/docs/#string_unquoting

Fuente

2012-04-21 05:19:27 FelipeAls

Esto también funciona con LESS regular. No sé si ocurrió en 2012 cuando se escribió esta respuesta. – trysis

-7

Uso de Drupal 7. He usado una marca adicional normal y está funcionando:

@images_path+'bg.png'

Fuente

2013-02-14 12:47:56 Gaba

A menos que esté dispuesto a aprender Drupal solo para cadenas concat para usarlo en LESS/CSS, creo que su sugerencia no tiene ningún valor. Sin ofender, solo digo. – ozanmuyes

Estaba buscando el mismo truco para manejar imágenes. He utilizado un mixin para responder a esta:

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

continuación, puede utilizar:

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

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

Fuente

2013-08-28 13:20:35 user2725509

¡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? –

Como se puede ver en la documentation, puede utilizar 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");

Fuente

2013-10-18 15:32:30

Para aquellos valores de unidades similares a cadenas como 45deg en transform: rotate(45deg), utilice la función unit(value, suffix). 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);

Fuente

2015-11-19 02:31:15 jordanb

No responde técnicamente la pregunta, pero sigue siendo un truco útil. – trysis

Cadenas de concatenación en Menos

Respuesta

Cuestiones relacionadas