如何连接Sass变量

如何连接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');
}

我发现了这个问题，但它对我不起作用：

---

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

$url: 'siteurl.com';

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

• 为变量赋值时，需要使用

  ：

  ，而不是

  =

• 您应该引用图像路径，因为它是一个字符串
• 在

  $url

您可以在

上看到上面的代码。请使用以下命令：

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

---

最好是通过插值

（#{}）

，其中所有字符串都不带引号

$basePath= 'example.com';

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

---

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

与已经被接受的答案相比，这个答案有什么不同？依赖字符串插值的语法在阅读上略有不同，对某些人来说可能有不同的意义，因此似乎是一种有用的替代方法。不管怎么说，对我来说，这句话更灵活。例如，您可能希望基于现有颜色创建一种颜色，如下所示：

$accent light:#{$accent}80（生成透明度为50%的新颜色）。我相信
{$variable}
语法几乎可以在任何地方使用，而
$variable+“some string”
不能。这似乎在
$basePath
的定义中包含语法错误