0

我正在使用以下 SCSS 混合 

@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测试以下代码

4

1 回答 1

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

于 2018-12-18T14:22:43.473 回答