Как в scss & преобразовать в текст?

Question

[quiplunar]

Использую такую конструкцию:

:host {
     .ui-button {
          width: 100%;
          height: 100%;
          $self: &;

          :hover {
                    #{$self}__icon {
                              display: none;
                    }
          }
     }
}

Но она не работает в angular, идет добавление: -shadowcsshost

Но если сделать так:

:host {
     .ui-button {
          width: 100%;
          height: 100%;
          $self: '.ui-button';

          :hover {
                    #{$self}__icon {
                              display: none;
                    }
          }
     }
}

То работает.

И собственно вопрос: Как & преобразовывать в текст чтобы не писать имя класса вручную?

Answer 1

[Flying]

selector-parse(&), детали см. в документации.