Скомпилированный CSS не удалось с вложенным mixin с амперсандом - PullRequest
Новая
       20

Скомпилированный CSS не удалось с вложенным mixin с амперсандом

1 голос
/ 29 мая 2019

Я пытаюсь совместить миксин, чтобы обновить стиль.Но я обнаружил, что вывод CSS выглядит не так, как я ожидал.

Интересно, можно ли как-нибудь совместить миксин и иметь амперсанд справа.

Ниже приведен пример кода и ожидаемый результат.

Спасибо.

HTML: 

<html class="classA">

  <div class="itemA">
    <div class="itemB">Item B</div>
  </div>

</html>

SCSS: 

@mixin add-style-when-classA-exist() {
  .classA & {
    @content;
  }
}

@mixin add-style-when-classB-notExist() {
  html:not(.classB) & {
    @content;
  }
}

.itemB {
  color: blue;

  @include add-style-when-classB-notExist() {
      color: green;
  }

  @include add-style-when-classA-exist() {
    color: red;

    @include add-style-when-classB-notExist() {
      color: yellow;
    }
  }
}

Фактический вывод CSS: 

.itemB {
  color: blue;
}
html:not(.classB) .itemB {
  color: green;
}
.classA .itemB {
  color: red;
}
html:not(.classB) .classA .itemB {
  color: yellow;
}

Ожидаемый вывод CSS: 

.itemB {
  color: blue;
}
html:not(.classB) .itemB {
  color: green;
}
.classA .itemB {
  color: red;
}
html:not(.classB).classA .itemB {
  color: yellow;
}
...