如何连接Sass变量

Question

如何连接Sass变量？

这是scss文件中的代码.

$url = 'siteurl.com';

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

我希望CSS文件中的结果是:

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

我发现了这个问题,但它对我没有用: 尝试连接Sass变量和字符串

Answer 1

这里有多个问题,正确的语法是

$url: 'siteurl.com';

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

• 为变量赋值时,需要使用:而不是=
• 你应该引用图像路径,因为它是一个字符串.
• +之前删除杂散符号$url

您可以在SassMeister中看到上面的代码

Answer 2

最好通过插值来做到这一点( #{} )，其中所有字符串都变成不带引号的。

$basePath= 'example.com';

#some-div{
    background-image: url('#{$basePath}/images/photo.jpg');
}

对于这个特定的用例来说，这是一种更安全的方法，因为您不希望在您的网址中添加任何额外的引号。

Answer 3

用这个：

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