SCSS mixin dynamic class name evaluates without quotation mark

Question

I'm using the following SCSS mixin

@mixin QuintIcon($path, $name, $color) {
  ion-icon {
    &[class*=#{quote($name)}] {
      mask-image: url($path);
      color: #{$color};
    }
  }
}

@include QuintIcon("../../assets/img/tabs/rings.svg", "quint-ring", "#FFF");

I expect the following result

ion-icon[class*="quint-ring"] {
  mask-image: url("../../assets/img/tabs/rings.svg");
  color: #FFF;
}

However i get this

ion-icon[class*=quint-ring] {
  mask-image: url("../../assets/img/tabs/rings.svg");
  color: #FFF;
}

Explanation

The difference between those two code blocks is on the first line right after the '=' symbol. I expect the value to evaluate into a quoted string, but it doesn't, even if I use the Quote SCSS Function. I'm plugging this into Ionic but this has nothing to do with styling, it works only with quotation marks.

Experimenting

You can test the following code at SassMeister

Answer 1

Using

@mixin QuintIcon($path, $name, $color) {
  ion-icon {
    &[class*="#{$name}"] {
      mask-image: url($path);
      color: #{$color};
    }
  }
}

@include QuintIcon("../../assets/img/tabs/rings.svg", "quint-ring", "#FFF");  

on Sassmeister using LibSass or Sass compiler I get

ion-icon[class*="quint-ring"] {
  mask-image: url("../../assets/img/tabs/rings.svg");
  color: #FFF;
}

Looks like what you expected.

Also, why does

ion-icon[class*=quint-ring] {
  mask-image: url("../../assets/img/tabs/rings.svg");
  color: #FFF;
}

not work for you? I can not find a scenario where the resulting selector would be problematic:

div[class*=quint-ring] {
  color: green;
}

<div class="quint-ring">quint-ring</div>
<div class="squint-ring">squint-ring</div>
<div class="quint-rings">quint-rings</div>
<div class="aaa sfdfsdfsquint-ring">aaa sfdfsdfsquint-ring</div>
<div class="quint-ringsssss bdfdb">quint-ringsssss bdfdb</div>

https://codepen.io/connexo/pen/BvLMBW