混淆与文本混合的sass / scss变量

Question

试图让我了解sass / scss和变量。

我试图为基于主题明暗的图像设置不同的URL路径。

所以我有这个变量设置：

$icon-url: "/templates/default/images/network-icons/";

然后我想做这样的事情，将其放在每个使用的不同图标中：

background-image: url($icon-url+"twitter.svg");

那是行不通的，不能完全正确，没有任何指针吗？

Answer 1

您可以像这样使它工作：

// import
$icon-url: '/templates/default/images/network-icons/';

// declaration
.foo {
  background-image: url('#{$icon-url}twitter.svg');
}

这将导致编译CSS：

.foo {
  background-image: url("/templates/default/images/network-icons/twitter.svg");
}

此处的键是#{variable}，它用变量的赋值替换变量。详细了解interpolation in the Sass documentation。