LESS css set dynamic background image with mixin

DMin picture DMin · Jun 13, 2011 · Viewed 19.7k times · Source

I am using LESS CSS .

I am currently using Mixins with variables.

Something like this works okay :

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

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

This is not :

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

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

i have tried combinations of using ' & " in the background-image:url ('') & ("") but then it tries to get the image as images/@img instead of the image name. other wise it gives me an error of
Cannot call method 'charAt' of undefined

I think writing background-image:url() all the time is too tedious, is this possible..?

Answer

DMin picture DMin · Jun 13, 2011

:) got my answer!

it needs to be used like this in my case :

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

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