Search code examples
sass

How to concatenate Sass variables


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


Solution

  • 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