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?

Question: What do you do if the browser caches the CSS file? — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 15, 2012 at 22:57

Alan Geleynse · Accepted Answer · 2012-02-15 23:05:55Z

4

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.

answered Feb 15, 2012 at 23:05

Alan Geleynse

25.2k6 gold badges49 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cwd Over a year ago

perfect! not for others: i had to use both the {} AS WELL AS wrapping the inner contents of url() with the double quotes, just as you suggested.

Daniel Schwarz Over a year ago

How could you do this using variable math? E.g. @mobile: ~"(max-width: @{main} - 1)"; where I need the - 1 to work?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related