How to convert to text in scss?

Question

Sass

I am using this construct:

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

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

But it doesn't work in angular, there is an addition: -shadowcsshost

But if you do this:

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

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

That works.

And actually the question is: How to convert & to text so as not to write the class name manually?

Answer 1

selector-parse(&), see documentation for details .