前言
大家都熟知，WEB前端开发的三剑客就是HTML,CSS,JavaScript。通过结合这三种技术以及其派生技术/框架的融合应用，最终产生出了各式各样五花八门的WEB项目。
我们用通俗易懂的方式来理解这’三剑客’之间的关系，即HTML主内容与框架，CSS主风格与样式，JS主逻辑与交互。
CSS预处理器
CSS 自诞生以来，基本语法和核心机制一直没有本质上的变化，在很长一段时间内，它的发展几乎全是表现力层面上的提升。
最开始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如今网站的复杂度已经不可同日而语，原生 CSS 已经让开发者力不从心。
当一门语言的能力不足而用户的运行环境又不支持其它选择的时候，这门语言就会沦为 “编译目标” 语言。开发者将选择另一门更高级的语言来进行开发，然后编译到底层语言以便实际运行。于是，在前端领域，天降大任于斯人也，CSS 预处理器应运而生。
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。 转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。
百花齐放****
CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成 CSS 的程序。
市面上有很多 CSS 预处理器可供选择，且绝大多数 CSS 预处理器会增加一些原生 CSS 不具备或不完善的高级特性，这些特性让 CSS 的结构更加具有可读性且易于维护。当前社区代表的 CSS 预处理器 主要有一下几种：
Sass/Scss：2007 年诞生，最早也是最成熟的 CSS 预处理器，拥有 Ruby 社区的支持和 Compass 这一最强大的 CSS 框架，目前受 LESS 影响，已经进化到了全面兼容 CSS 的 SCSS。
Less：2009年出现，受 SASS 的影响较大，但又使用 CSS 的语法，让大部分开发者和设计师更容易上手，在 Ruby 社区之外支持者远超过 SASS，其缺点是比起 SASS 来，可编程功能不够，不过优点是简单和兼容 CSS，反过来也影响了 SASS 演变到了 SCSS 的时代，著名的 Twitter Bootstrap 就是采用 LESS 做底层语言的。
Stylus：Stylus 是一个CSS的预处理框架，2010 年产生，来自 Node.js 社区，主要用来给 Node 项目进行 CSS 预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的 CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似。
优点
虽然各种预处理器功能强大，但使用最多的，还是以下特性：变量（variables），代码混合（mixins），嵌套（nested rules）以及 代码模块化(Modules)。
接下来以 Less 为例，展示一下这几个主要特性在预处理器中的实现。
1. 变量
（1） 可以将属性的值赋值给一个变量，变量为完全的常量，所以只能定义一次
（2） 可以通过使用变量名定义为变量
2. 混合
（1） 将一些通用的属性放在一个class中，然后在例外一个class中去调用这些属性。任何的class和id或是元素都可以用这样的方式进行引入
（2） 混合中可以携带参数，可以像函数一样定义一个带参数的属性集合，也可以给参数设置一个默认的值
3. 嵌套
4. 代码模块化
5. 其他
（1） 运算
任何数字、颜色都可以参与运算， less运算能够分辨颜色和单位
（2） 函数
less本身提供了一系列的颜色运算函数。颜色会被转化成为HSL色彩空间，然后在通道级别操作
同时也提供了一组方便的数学函数，可以使用它们处理一些数字类型的值
（3） 命名空间
有时候，我们可能更好地组织CSS或是单纯的为了更好地封装，我们会将会一些变量或是混合模块进行打包操作，为了后续进行复用
当我们想要在某一个地方引入button的样式的时候
（4） 作用域
less的作用域和其他编程语言十分的相似，首先在本地的变量和混合模块进行查找，如果没有找到的话，就会去父及作用域查找，直到找到为止
实际应用****
1. 自定义颜色主题机制
2. Mixins公共样式机制
3. 分辨率自适应机制
