关于CSS应用

1. 按照 css的插入方式可以分为：

• 静态css即原生css。（一般需要搭配css预处理器一起使用，对各种前端项目进行样式设置，可维护性低。）
• 动态css即css in js ：tailwindcss、style-components、emotion、CSS Modules、styled-system等。（可以利用各种前端框架中可用的原生元素，比如组件属性或者状态等，提供完全动态的css，通过生成一个随机类名应用到需要设置样式的元素上，并将一个<style>元素注入到文档头部的方式实现样式，可以很大程度上消除元素样式的特异性层次结构，由于当应用程序状态更改或者组件更新时，会重新进行计算，故会带来一些性能损失。）

2. css预处理器（css pre-processor）：添加css原本没有的额外功能，例如嵌套、继承选择器、混合（可重用声明包）。（常见的有：Less、Sass、styled-jsx） 👉参考资料一 👉参考资料二 👉参考资料三 👉参考资料四
3. less和sass在语法上的一些共性：

• 混入（Mixins）：class中的class.
• 参数混入：可以传递参数的class，就像函数一样。
• 嵌套规则：class中嵌套class，从而减少重复代码
• 运算：css中运用数学计算规则。
• 颜色功能：可以编辑颜色。
• 命名空间（namespace）：分组样式，从而可以被调用。
• 作用域：局部修改样式。

4. less：👉官网

5. sass：👉官网 有sass、scss两种不同的语法（故常见.sass、.scss文件），后者语法更贴近原生css语法。

6. 啊这：

7. 啊这：

8. 啊这：