Is it possible to write full css line with LESSCSS using variables?

Question

is there a way that you can write a full CSS line using a LESS variable?

For example, if I declare a variable:

@dir: test;

and then want that variable to be used within another variable:

@bg-img: url(http://example.com/@dir/img/bg.png;

When I try to use @bg-img in my CSS, it compiles like this:

body{background-image:url(http://example.com/@dir/img/bg.png);

How do I get @dir to echo out as test?

I know that I can just replace @dir but since I have various different microsites, it'll be quicker to change the one instance of @dir rather than go through and change every instance of the microsite name.

Dalex · Accepted Answer · 2013-09-30 09:36:33Z

2

This is possible by interpolation, but not certain if this would work in your particular situation without seeing more code. However, give this a try:

body{background-image:url(http://example.com/@{dir}/img/bg.png);

Found it in the docs, down the page under String interpolation. Hope this helps.

EDIT: and escape, just as @Rob W mentions in the comments. Also in the doc, just below interpolation.

edited Sep 30, 2013 at 9:36

answered Sep 30, 2013 at 9:29

Dalex

3,0612 gold badges32 silver badges23 bronze badges

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

2 Comments

Albzi Over a year ago

This worked perfectly. Thank you very much! Will make this accepted answer ASAP!

Rob W Over a year ago

@BeatAlex Still outputs as @{dir} to me in LESS 1.4. You need to escape the value, as @bg-img: ~"url(http://example.com/@{dir}/img/bg.png)".

Collectives™ on Stack Overflow

Is it possible to write full css line with LESSCSS using variables?

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