父组件的样式应用到子组件中（sass）

今天在敲代码的时候，做了一个总体的父组件页面，样式都写好了。想着写个子组件，在父组件中引用，结果，发现问题了：尽管父组件写好了样式并引用了，子组件也在模板上应用了对应的class，但是就是不起作用。为此，翻了一下官方文档，果然找到料

resolve

简单啦，我只要在父组件要应用到子组件的样式类前面加个 /deep/ 就好啦。
然而，sass编译器告诉我编译错误

error

其实这样直接编译是可以的，只是看不惯赤裸裸的错误提示，所以灵机一动，把/deep/变成变量就好了

pass

ok，可以继续敲代码了 = = ||

16-11-25 更

今天遇到了新的需求：已知有了一个父组件

父组件

父组件的模板引用了一个子组件：

父组件模板

子组件

子组件呢还能动态添加子组件，就叫孙组件吧-_- ||，嵌套于之中。

所以问题来了，我们已经知道在父组件的样式加上 /deep/ 就能将样式应用于全部的子组件中，但是现在我并不想要在父组件下控制子组件的样式，在父组件中只需要给自组件的上一层加点样式，所以还是依然可以直接使用 /deep/，就像

父组件

所有之间的样式都会应用到 .content下面，所以子组件默认被应用了。这是我之前说的。
现在有新的需求，子组件管理自己以及内部（动态创建的孙组件）的样式，为了方便后来的样式提取（我是这样想的-_- ）。
ok，按照前面的思路，就是给子组件的样式加个 /deep/ 就好了，但是最终的结果就是子组件的样式会覆盖到全局去，WTF！
于是又查了文档，发现了料

host

那我直接选择子组件的上一层，再加个 /deep/ 应用所有孙组件不就行了，就像

子组件样式

对于sass的，要转为变量 #{':host'}不然编译后没有效果。

结果发现符合预想，ok 可以继续敲代码了 -_- ||