css - una - less tutorial

LESS css establece una imagen de fondo dinámica con mixin

Question

Estoy usando MENOS CSS .

Actualmente estoy usando Mixins con variables.

Algo como esto funciona bien:

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

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

Esto no es:

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

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

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

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

Answer 1

:) tengo mi respuesta!

necesita ser usado así en mi caso:

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

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

Answer 2

Puede seguir mejorando al agregar la primera parte de la ruta de la imagen a la mezcla inicial para que solo tenga que escribirla 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.