Sass variable in quotes for href

Question

I'm struggling with a project. I'm using the selector [href*=#{web}] on a variable that I use multiple times on an each loop. The purpose on the each loop is to go through the links on a navigation bar and give a font icon to those that align with social media platforms. The variable that is being run through are things like twitter, facebook, linkedin, and I'm trying to use it to call the url and set up the mixin included. My big problem is that everytime I try to quote the variable $web to get it to show up as a link for the css, it stops parsing the variable and becomes something like "#{$web}" in the compiled css file. What can I do to make variable compile but still quote for 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 value to be output.