在scss里面的阴影穿孔

Question

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

 <td class="danish"> Det
         tycker jag!</td>

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提供（并默认）一个模拟 shadow DOM实现（它不使用本机shadow DOM实现，所以它对/deep/的使用与本机浏览器无关use - 为自己的实现重载而不是在最终的css中输出。因此，在模拟中使用/deep/ shadow DOM样式封装（encapsulation: ViewEncapsulation.Emulated）仍然适用于所有浏览器。< / p>

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