css - dinamico - javascript remove html tags from string

Concatenar cadenas en Less

Question

Creo que esto no es posible, pero pensé que lo haría en caso de que hubiera una 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 cuerdas se combinen en una sola cuerda como esta:

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

¿Es posible concatenar cadenas en Less?

Answer 1

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

Answer 2

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");
}

Answer 3

No sé si estás usando less.js o lessphp (como en el plugin WP-Less para WordPress) pero con lessphp puedes "desmarcar" cadenas con ~ : http://leafo.net/lessphp/docs/#string_unquoting

Answer 4

Para esos valores unitarios de cadena como 45deg in transform: rotate(45deg) use la función de 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);

Answer 5

Usando Drupal 7. He usado una marca más común y está funcionando:

@images_path+''bg.png''

Answer 6

Usar interpolación variable :

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

Código completo:

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