引号中的 Sass 变量

Question

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

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