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?
Usar interpolación variable :
@url: "@{root}@{file}";
Código completo:
@root: "../img/"; @file: "test.css"; @url: "@{root}@{file}"; .px{ background-image: url(@url); }
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");
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"); }
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
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);
Usando Drupal 7. He usado una marca más común y está funcionando:
@images_path+'bg.png'