如何连接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变量和字符串

- DavSev

Answer 1

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

$url: 'siteurl.com';

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

• 当您将值分配给变量时，需要使用:而不是=
• 应该引用图像路径，因为它是一个字符串。
• 删除$url前面的杂散的+符号

您可以在SassMeister上看到上述代码的实际效果。

- Mr. Alien

Answer 2

使用此代码：

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

- Dmitry Shashurov

---

与已经被接受的答案相比，这个答案有何不同之处？ - Stein

基于字符串插值的语法略有不同，可能对某些人来说意义不同，因此似乎作为一种替代方案很有用。对我来说是这样的。 - bigsee

@stein 我认为这种语法更加灵活。例如，也许你想基于现有的颜色创建一个新的颜色，就像这样：$accent-light: #{$accent}80;（创建一个50%透明度的新颜色）。我相信 #{$variable} 语法几乎可以用在任何地方，而 $variable + "some string" 则不行。 - V. Rubinetti

Answer 3

最好的方法是通过插值 ( #{}) 实现，这样所有字符串都将变成未引用的。

$basePath= 'example.com';

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

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

- Gaurav Kakkar

---

在$basePath的定义中似乎包含了语法错误。 - Alex Angas

这是因为他使用等于号=而不是冒号:。 - undefined

Answer 4

一个例子：

$dot: '0.'; 

@for $i from 1 through 9 {
  .op#{$i} {
    opacity: #{$dot}#{$i};
  }
}

根据逻辑，变量在$dot: '0.'中声明，我在#{$dot}中调用它。 上面的示例展示了SCSS中两个连接的变量。

- Leffa

Answer 5

2023年9月

对于任何寻找报价的人，无论是否有报价

$url: 'siteurl.com';

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

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

- Dexter