Angular 中关于 CSS 的建议与技巧，正确理解 Angular 中的特殊选择器 :host 和 :host-context，以及如何在 @import 规则中使用绝对路径。
tips and tricks
当你创建 angular 项目时，有三个主要文件夹 app、assets 和 environments。
assets 仅用来存放 images 和 fonts，不建议将 styles 放在其中。建议你创建一个 styles 文件夹。
文件名下划线开头，表示这是一个片段，通常是 @import 引用的对象，引用时可以忽略下划线
引用规则优先级：Global CSS > Module CSS > Component CSS，可以充分利用继承的优势
@import 绝对路径
在 CSS 中可以通过 @import 导入其他样式文件，但如何才能使用绝对路径呢，毕竟如果组件层次较深，会出现很多的 ../ 的形式。
社区有人说设置 stylepreprocessoroptions 属性，亲测在 angular 7/8 中会编译报错，应该是新版本直接去掉了。
答案就是通过 ~ 来进行寻找，其代表的位置是 src/
特殊选择器
之前一直没有太理解 :host 和 :host-context 的作用。今天使用 host-context 实现了一个比较特别的效果。
比如设置一个组件，但是你想在某个场景 case1 中，使用特殊的样式，此时你可以这样做，例子如下
:host-context(.case1) .panel {
// 特殊样式
}
.panel {
// 通常样式
}
:host-context 的作用就是基于某些来自组件外部的条件应用样式，比如主题切换功能
别问我为啥会有这种场景，需求嘛，你懂得！
至于 :host 选择器表示选择组件的宿主元素，如果要把宿主样式作为条件，就要像函数一样把其它选择器放在 :host 后面的括号中。
覆盖组件样式
很大可能，你会碰到需要 UI 库样式的需求，目前并没有找到满意的方式，只能通过修改全局样式来达到目标，为针对性覆盖，可通过设置父类来限制使用场景。
样式统一思考
最近公司在统一前端的样式，我们通常会考虑到定义一系列的规范，比如
- 字体大小、颜色种类
- 背景颜色种类
- 留白、间距
- 行高
- 圆角、边框
- 按钮，输入框大小
- 平牌色，成功、失败、警告
- ……
使用过程中觉得不是很顺畅，比如某处场景字号、字色、留白、间距并没有太多感觉。这里的设计值得多思考！