SCSS mixin动态类名的评估不带引号

Question

我正在使用以下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");

我希望得到以下结果

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

但是我明白了

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

说明

这两个代码块之间的差异在'='符号后的第一行。我希望该值可以计算为带引号的字符串，但即使使用Quote SCSS Function也不会。我将其插入Ionic，但这与样式无关，仅适用于引号。

实验

您可以在SassMeister

中测试以下代码

Answer 1

使用

@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");  

使用LibSass或Sass编译器在Sassmeister上获取

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

看起来像您期望的那样。

还有，为什么

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

不适合您吗？我找不到导致选择器出现问题的情况：

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