How can I force LESS (css) to recognize a variable?

Question

I have a few images on my site that will change over time. To be sure the CSS forces updates when I make changes, I have appended a query variable with a version string to them:

#branding{ background: url(../img/branding.jpg?v2); }

I'd like to be able to do this with LESS so I don't have to change all of the image references:

@mediaVersion: 101;
#branding{ background: url(../img/branding.jpg?v@mediaVersion); }

However Less.app can not recognize the variable @mediaVersion in that string and leaves it as written. I tried wrapping it in {@mediaVersion} and also (@mediaVersion) but those cause errors when compiling. I tried adding a semi colon after it.

How can I get this to work?

Answer 1

Try this:

@mediaVersion: 101;
#branding{ background: url("../img/branding.jpg?v@{mediaVersion}"); }

The section "String interpolation" at http://lesscss.org/#-variables shows that this should work.