CSS速刷 - 预处理器
预处理器是什么？
less Sass
预处理器有啥功能？
- 嵌套，反映了层级和约束
- 变量和计算，减少了重复代码
- Extend和Mixin代码片段，就像具备同一个功能的函数。
- 循环，适用于复杂有规律的样式
- import CSS文件模块化
1. less嵌套
Node写的，通过npm发布。 &:同一层级
2. Sass嵌套
输出和less嵌套差不多。
3. less变量
@变量
4. Sass变量
$变量
5. mixin
原本一段公共代码想要复用，是在HTML层面上进行复用的，在需要的地方加上class="block"这个类就可以。CSS本身是没有为我们提供样式复用的功能的。So mixin出现了。把代码复制过来。
- less的mixin：
调用：
- Sass的mixin：
调用：
6. extend
把选择器提取出来，把公共样式写到一起。解决了代码复制，生成的CSS文件导致代码重复问题。
- less的extend：
- Sass的extend：
7. loop
按照一定的规则生成有规律的样式。
- less
mixin的递归调用自己：
- Sass
Sass支持for循环写法：
8. import
- less
把每个模块写到一个单独的less文件再一一import。编译的时候会生成需要的CSS。 - Sass 大差不差
9. CSS预处理器框架
按需使用别人写好的代码。
面试真题
前端工程化之 webpack处理CSS
css-loader style-loader
css modules
webpack总结
