Shadow piercing inside scss

Question

I am using shadow piercing css for one of my styles. But I have color codes inside scss which I want to use in the style. Is it possible to have the shadow piercing inside a scss file?

@Component({
selector: 'my-selector',
styles: [
    require('./my.style.scss'),
    ':host >>> .mystyle { background-color: green }'
],
templateUrl: './my.template.html'
})

Answer 1

AFAIK >>> is not supported in SASS because this combinator didn't make it into the CSS standard. Angular has it's own implementation to emulate it's support.

AFAIR just using a space instead of >>> has the same effect in Angular2 with ViewEncapsulation.Emulated (default).

Using a space doesn't seem to be equivalent to >>> and /deep/ anymore.

Plunker example

/deep/ is equivalent to >>> in Angular, but only /deep/ works well with SASS.

update

SASS deprecated >>> and introduced ::ng-deep for special Angular support (hence the ng- in the name).
Recent Angular 4 versions already support ::ng-deep and also have deprecated >>>.

In the docs it is mentioned that ::ng-deep is also deprecated, but this is for a different reason. When all browsers support shadow DOM with proper theming, ViewEncapsulation.Emulated (default) will be dropped and Native will be become the default and ::ng-deep will become obsolete.

update 2

::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted