SCSS mixin dynamic class 名称计算时不带引号

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

在 Sassmeister 上使用 LibSass 或 Sass 编译器我得到

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

SCSS mixin dynamic class 名称计算时不带引号

SCSS mixin dynamic class name evaluates without quotation mark

sass

styling

mixins

scss-mixins

说明

试验