引号中的 Sass 变量为 href

Question

我正在为一个项目而苦苦挣扎。我在[href*=#{web}]每个循环中多次使用的变量上使用选择器。每个循环的目的是浏览导航栏上的链接，并为与社交媒体平台一致的链接提供字体图标。正在运行的变量是 twitter、facebook、linkedin 之类的东西，我试图用它来调用 url 并设置包含的 mixin。我的大问题是，每次我尝试引用变量$web以使其显示为 css 的链接时，它都会停止解析变量并变成类似于"#{$web}"已编译的 css 文件中的内容。我该怎么做才能使变量编译但仍然引用 href？

Answer 1

所以，像这样：

$sites: ("twitter.com", "facebook.com", "linkedin.com");

@each $site in $sites {
  a[href*="#{$site}"] {
    background-image: url("/images/" + $site + ".png");
  }
}

结果是：

a[href*="twitter.com"] {
  background-image: url("/images/twitter.com.png");
}

a[href*="facebook.com"] {
  background-image: url("/images/facebook.com.png");
}

a[href*="linkedin.com"] {
  background-image: url("/images/linkedin.com.png");
}

Answer 2

尝试将此作为您的选择器：

[href*="#{$web}"]

根据一些简短的研究，看起来美元符号强制输出变量值。