0

次の 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;
}

説明

これら 2 つのコード ブロックの違いは、「=」記号の直後の最初の行にあります。値が引用符で囲まれた文字列に評価されることを期待していますが、 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");

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

于 2018-12-18T14:22:43.473 に答える