如何连接 Sass 变量答案

【问题标题】：How to concatenate Sass variables如何连接 Sass 变量
【发布时间】：2018-02-27 19:13:15
【问题描述】：

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

我发现了这个问题，但对我没有用： Trying to concatenate Sass variable and a string

【问题讨论】：

标签： sass

【解决方案1】：

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

$url: 'siteurl.com';

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

你可以在SassMeister看到上面的代码

【讨论】：

【解决方案2】：

使用这个：

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

【讨论】：

与已经接受的答案相比，这个答案有什么不同？
依赖于字符串插值的语法在阅读上略有不同，对某些人来说可能有不同的意义，因此作为替代方案似乎很有用。无论如何，这对我来说是。
@stein 我认为这种语法更灵活。例如，也许您想根据现有颜色制作一种颜色，如下所示：$accent-light: #{$accent}80;（制作一种透明度为 50% 的新颜色）。我相信#{$variable} 语法几乎可以在任何地方使用，而$variable + "some string" 不能。

【解决方案3】：

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

$basePath= 'example.com';

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

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

【讨论】：

【解决方案4】：

一个例子：

$dot: '0.'; 

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

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

【讨论】：