How to concatenate Sass variables
The best to do it via interpolation ( #{} )
, where all strings become unquoted.
$basePath= 'example.com';
#some-div{
background-image: url('#{$basePath}/images/photo.jpg');
}
This is a safer way for this particular use-case as you won't want any additional quotes added to your url.
A example:
$dot: '0.';
@for $i from 1 through 9 {
.op#{$i} {
opacity: #{$dot}#{$i};
}
}
By logic, the variable is declared in $dot: '0.';
and I called her in #{$dot}
.
This example above shows two concatenated variables in SCSS.
Use this:
$domain: 'domain.ru';
#some-div {
background-image: url('#{$domain}/images/img.jpg');
}
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