How to concatenate Sass variables

Question

How can I concatenate a Sass variable?

This is the the code in the scss file.

$url = 'siteurl.com';  #some-div{     background-image: url(+ $url +/images/img.jpg); } 

I want the result in the CSS file to be:

#some-div{     background-image: url('siteurl.com/images/img.jpg'); } 

I found this question, but it didn't worked for me: Trying to concatenate Sass variable and a string

Answer 1

Multiple issues here, the correct syntax is

$url: 'siteurl.com';  #some-div{   background-image: url($url + '/images/img.jpg'); } 

• When you assign a value to the variable, you need to use : and not =
• You should quote the image path as it's a string.
• Remove the stray + symbol before $url

You can see the above code in action at SassMeister

Answer 2

Use this:

$domain: 'domain.com'; #some-div {     background-image: url('#{$domain}/images/img.jpg'); }