在程序员眼里，css不像其他程序语言（例如PHP, Javascript等等），有自己的变量、常量、条件语句以及一些编程语法，它只是一行行单纯的属性描述，写起来相当费事，而且代码难以组织和维护。自然的有人开始想，能不能给css像其他程序语言一样，加入一些编程元素，让css能像其他程序语言一样可以做一些预定的处理，就这样，有了"css预处理器（css preprocessor）”。
具体什么是css预处理器呢？
css预处理器定义了一种新的语言，其基本思想是：用一种专门的编程语言，为css增加一些编程特性，将css作为目标生成文件，然后开发者只要使用这种语言进行编码工作，然后再编译成正常的css文件，以供项目使用。使用css预处理器无需考虑浏览器的兼容性问题，你可以在css中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。
css预处理器技术已经非常成熟，目前也出现了多种不同的css预处理语言，Sass (SCSS)、LESS、Stylus等等
Sass简介
Sass号称是世界上最成熟、最稳定、最强大的专业级CSS扩展语言。完全兼容所有版本的CSS，拥有比其他任何CSS扩展语言更多的功能和特性，行业内把Sass作为首选css扩展语言。sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
Sass中文网：https://www.sass.hk/
Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。
另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。
Less简介
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 是基于JavaScript写的，可以运行在 Node 或浏览器端。
Less中文网：http://lesscss.cn/
bootstrap文档：http://www.bootcss.com/p/lesscss/#synopsis
Stylus简介
用于node,js,，支持去掉‘{}‘，‘：‘，‘;‘，‘()‘
中文文档：http://www.zhangxinxu.com/jq/stylus/
原文地址：https://www.cnblogs.com/xuepei/p/8478204.html