在scss里面的阴影穿孔

Question

我正在使用阴影穿孔css作为我的一种风格。但我在scss中有颜色代码，我想在风格中使用。是否可以让阴影穿过scss文件？

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

Answer 1

SASS不支持AFAIK >>>，因为这个组合器没有进入CSS标准。 Angular有它自己的实现来模仿它的支持。

使用空格而不是>>>的AFAIR在Angular2中使用ViewEncapsulation.Emulated具有相同的效果（默认）。

使用空格似乎不再等同于>>>和/deep/。

Plunker example

/deep/相当于Angular中的>>>，但只有/deep/适用于SASS。

更新

SASS弃用了>>>并引入了::ng-deep以获得特殊的角度支持（因此名称中的ng-）。 最近的Angular 4版本已经支持::ng-deep，并且已经弃用了>>>。

在文档中提到::ng-deep也被弃用了，但这是出于不同的原因。当所有浏览器都支持具有正确主题的影子DOM时，ViewEncapsulation.Emulated（默认值）将被删除，Native将成为默认值，::ng-deep将变得过时。

更新2

::slotted现在受到所有新浏览器的支持，可以与`ViewEncapsulation.ShadowDom一起使用

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

Answer 2

尽管>>>和/deep/应该是等价的，但我发现用>>>替换/deep/运算符时使用.scss文件。

Answer 3

/deep/本身在浏览器中作为影子DOM穿孔后代组合器得到支持，但确实已弃用（并在Chrome 63中删除）。

但是，因为Angular提供（并默认）一个模拟的影子DOM实现（它不使用本机影子DOM实现，它使用/deep/与本机浏览器使用无关 - 为自己的实现重载而不是在最终的css中输出因此，在模拟阴影中使用/deep/ DOM样式封装（encapsulation: ViewEncapsulation.Emulated）仍然适用于所有浏览器。

但是，因为想法是转向本机封装（来自模拟），Angular在其自己的模拟实现中弃用了/deep/（尽管它仍然有效，并且技术上总是如此）。