Sass variable in quotes for href

Question

I am struggling with the project. I use a selector [href*=#{web}]for a variable that I use several times in each loop. The goal of each cycle is to go through the links in the navigation bar and give a font icon to those that match social networking platforms. A variable that goes through things like twitter, facebook, linkedin, and I'm trying to use it to call the url and configure mixin to turn on. My big problem is that every time I try to cast a variable $webso that it appears as a link for css, it stops parsing the variable and becomes something like "#{$web}"in a compiled css file. What can I do to compile the variable, but still point to href?

Answer 1

So something like:

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

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

Results in:

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

Try this as your selector:

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

Based on some brief research, it looks like the dollar sign forces the variable to be displayed.