CSS预处理器
我们知道，CSS入门简单但是却有许多弊端。例如：
1、语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
2、没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；
这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员需要使用一种称之为 【CSS 预处理器】 的工具。CSS预处理器就是一种可以将你根据它的规则写出来的格式转成css的东西，CSS预处理器主要有以下功能：
1、文件切分：把一个大的 CSS 文件在切分成多个小文件，实现初步模块化
2、选择符嵌套：避免了书写大量重复选择器，减少代码冗余
3、设置变量：实现样式复用，使代码变得易维护
4、可使用运算、函数等
几种主流CSS预处理器分别是Less、Sass和Stylus。
Sass：2007年出现，有两种语法，分别以 .sass 和 .scss 为扩展名。基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 Less。
Less：2009年出现，受Sass影响大，以 .less 为扩展名。基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但在实际开发中足够了。
Stylus：2010年出现，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，以 .styl 为扩展名，使用不如Sass和Less广泛。
CSS Module
我们知道组件应该相互独立，引入一个组件时，应该只引入它所需要的 CSS 样式。由于Saas/Less很难实现对每个组件都编译出单独的 CSS，所以实现模块化只有【CSS预处理器】是远远不够的，还有很多问题没得到解决，如下：
1、全局污染、命名混乱。
2、依赖管理不彻底。
3、无法共享变量。
4、代码压缩不彻底。
这时就需要 CSS Modules来解决，它使用JS编译CSS文件，使其具备模块化的能力。
CSS Modules不是将CSS改造的具有编程能力，而是加入了局部作用域、依赖管理，这恰恰解决了最大的痛点。可以有效避免全局污染和样式冲突，能最大化地结合现有 CSS 生态和 JS 模块化能力。
CSS Modules的配置也非常简单，下面以webpack+react为例介绍一下：
因为webpack 自带的 css-loader 组件，自带了 CSS Modules，所以在webpack配置文件（webpack.config.js）中加上【module: true 即可
在模块中使用时我们只需要修改一下css文件的引用方式即可
渲染结果为：
说明：
CSS Module还是JS和CSS分离的写法，不会改变大家的书写习惯，CSS Module只需修改构建代码和使用模块依赖引入className的方式即可使用，且支持less和sass的语法。
拓展（babel-plugin-react-css-modules）：
babel-plugin-react-css-modules 可以实现使用styleName属性自动加载CSS模块。只需要把className换成styleName即可获得CSS局部作用域的能力
网友评论