MENOS css establecer imagen de fondo dinámica con mixin

Question

Estoy usando LESS CSS.

Actualmente estoy usando Mixins con variables.

Algo como esto funciona bien:

.border-radius (@radius) { border-radius: @radius; } 

#header { .border-radius(4px); } 

Esta es no:

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

#logo { .bg-img("../images/logo.jpg"); } 

I ha intentado combinaciones de uso de '& "en la imagen de fondo: url ('') & ("") pero luego intenta obtener la imagen como images/@img en lugar del nombre de la imagen. De lo contrario, me da un error de
Cannot call method 'charAt' of undefined

Creo que escribir background-image:url() todo el tiempo es demasiado tedioso, ¿es esto posible ...?

Answer 1

:) ¡Obtuve mi respuesta!

que tiene que ser utilizado como esto en mi caso:

.bg-img(@img) { background-image:url("@{img}"); } 

#logo { .bg-img("../images/logo.jpg"); } 

Answer 2

puede mejorar aún más en esta añadiendo la primera parte de la ruta de la imagen a la mixin inicial por lo que sólo tiene que escribir una vez :

.bg-img(@img) { background-image:url("../images/@{img}"); } 

#logo { .bg-img("logo.jpg"); } 

Una pequeña mejora, pero agrega un poco de elegancia.