预处理语言的由来：CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩 展，不利于复用，为了让 CSS 富有逻辑性，短板不那么严重，涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门可以使用 变量 、循环 、继承 、自定义方法等多种特性的标记语言，逻辑性得以大大增强。
- Sass 诞生于 2007 年，采用 Ruby 编写，它最初由 Hampton Catlin 设计，并于2006年由 Natalie Weizenbaum 开发。后来 Weizenbaum 和 Chris Eppstein 初始版本用 SassScript 扩展 Sass。Sass中文文档
- Less 诞生于 2009 年，受 Sass 的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less中文文档
- Stylus 诞生于 2010 年，来自 Node.js 社区，主要用来给 Node 项目进行 CSS 预处理支持，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。Stylus中文文档
● Sass 转化为 CSS
1、官网下载并安装 Ruby，安装完成可以使用 ruby -v 命令查看版本号；
2、使用 gem install sass 命令安装 Sass；
3、进入需要转换的 Sass 文件的目标位置，使用 sass --watch xxx.sass:xxx.css 命令完成 Sass 到 CSS 的转化（xxx.sass 为待转化的 Sass 文件，.scss，.sass 都行，.sass 文件对代码的排版有着非常严格的要求，没有大括号和分号，.scss 对代码的要求没那么高，xxx.css 为转化后的 CSS 文件）
● Less 转化为 CSS
1、确认你的电脑已经安装了node，可分别使用 node -v 和 npm -v 命令查看 node 和 npm 版本号；
2、使用 npm install -g less 命令安装 Less；
3、进入需要转换的 Less 文件的目标位置，使用 lessc xxx.less xxx.css 命令完成 Less 到 CSS 的转化（xxx.less 为待转化的 Less 文件，xxx.css 为转化后的 CSS 文件）
● Stylus 转化为 CSS
1、确认你的电脑已经安装了node，可分别使用 node -v 和 npm -v 命令查看 node 和 npm 版本号；
2、使用 npm install -g stylus 命令安装 Stylus；
3、进入需要转换的 Stylus 文件的目录下，使用 stylus --compress src/ 命令完成 Stylus 到 CSS 的转化（src/ 为待转化的 Stylus 文件所在的目录）
● CSS 转化为 Stylus
1、确认你的电脑已经安装了node，可分别使用 node -v 和 npm -v 命令查看 node 和 npm 版本号；
2、使用 npm install -g stylus 命令安装 Stylus；
3、进入需要转换的 CSS 文件的目标位置，使用 stylus --css xxx.css xxx.styl 命令完成 CSS 到 Stylus 的转化（xxx.css 为待转化的 CSS 文件，xxx.styl 为转化后的 Stylus 文件）
除了使用命令行进行转化以外，如果代码不是很多，我们还可以选择使用在线工具，比如脚本之家在线工具等。