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}"]

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

用于href的引号中的Sass变量

2 个答案: