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

connexo · Accepted Answer · 2018-12-18T15:08:16.700

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

edited Dec 18 '18 at 15:08

answered Dec 18 '18 at 14:22

connexo

53,704
14
91
128

Weird, cause I don't get this result, we probably have a different configuration on SassMeister. On my end, I'm using DartSass v1.6.2 which I have no idea what it is. Obviously, it's a compiler but I don't think this works on Ionic – Dimitrios Filippou Dec 18 '18 at 14:35
I confirm that on LibSass compiler works as expected, but doesn't work on Ionic v3 framework – Dimitrios Filippou Dec 18 '18 at 14:39
The only compiler on Sassmeister that removes the quotation marks seems to be DartSass. Is that what Ionic v3 uses? – connexo Dec 18 '18 at 15:00
Your solution is right, I just messed up an ionic specific thing. Thanks! – Dimitrios Filippou Dec 18 '18 at 21:36

SCSS mixin dynamic class name evaluates without quotation mark

Explanation

Experimenting

1 Answers1