Имя динамического класса миксина SCSS оценивается без кавычек - PullRequest
Новая
       25

Имя динамического класса миксина SCSS оценивается без кавычек

0 голосов
/ 18 декабря 2018

Я использую следующий 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 .Я подключаю это к Ionic, но это не имеет ничего общего со стилем, оно работает только с кавычками.

Эксперимент

Вы можете проверить следующий код на SassMeister

1 Ответ

0 голосов
/ 18 декабря 2018

Использование 

@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 compiler Я получаю 

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

...