一、预处理 Less
1、官网文件
> 一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点
> [官网](http://lesscss.org/)
> [中文网](http://lesscss.cn/)
> http://www.w3cplus.com/css/less
[less手册]www.lesscss.net/
[bootstrap官网less介绍] http://www.bootcss.com/p/lesscss/
2、为什么要有预处理CSS
CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。
很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。
3、什么是预处理CSS
- CSS语言的超集，比CSS更丰满
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近网上的一大热门话题，在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言，这已经是很大的进步了。
到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀，讨论的也多，对比的也多。本文将分别从他们产生的背景、安装、使用语法、异同等几个对比之处向你介绍这三款CSS预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器。
4、如何使用预处理Less
less.js
> 网页运行阶段解析LESS文件
使用方式：
less compiler
> 开发阶段编译LESS文件成为CSS
使用方式：
安装
- 安装Node.js
- 安装less
+ 命令行执行：npm install -g less
编译操作
语法
注释
```less
// 模板注释，这里的注释转换成CSS后将会删除
/* CSS 注释语法 转换为CSS后任然保留 */
```
定义变量
> 将需要重复使用或经常修改的值定义为变量，需要使用的地方引用
二、浏览器端环境搭建
github下载地址：https://github.com/less/less.js
1、js引入
搭建Less的学习环境非常简单，只需在</body>标签前通过<script type="text/javascript" src="less.js"></script>引入处理器即可实现浏览器端中将less预编译为css样式。
更有效的方式是通过如下代码监测less样式，自动编译为css样式，从而减少我们修改less代码后需按F5后才看到实际效果的繁琐步骤。
<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>
2、less的css样式处理
less内联样式和外联样式
基于我们现在使用的是浏览器端进行预编译，因此Less可用于内联样式和外联样式当中。
内联样式如下：
<style type="text/less">
// less 代码
</style>
外联样式引入如下：
Note:注意rel的值是stylesheet/less
三、语法
1、注释
// 单行注释，不会作为最终输出 /* 多行注释，以原生CSS的/*注释....*/形式作为最终输出 */
2、变量
Less中的变量有以下规则：
- 以@作为变量的起始标识，变量名由字母、数字、_和-组成
- 没有先定义后使用的规定；
- 以最后定义的值为最终值；
- 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
- 定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
- 存在作用域，局部作用域优先级高于全局作用域。
Note:注意直接拷贝网页中代码可能因为一些空白符的原因导致编译出错。
less源码
1 @color: color; 2 @dialog: .dialog; 3 @suffix: fix; 4 // 空格将被忽略，若要保留空格则需要使用单引号或双引号 5 @hi: 'hello '; 6 @dear: there ; 7 8 .dialog{ 9 // 用于 rule属性部件，必须使用"@{变量名}" 的形式 10 background-@{color}: #888; 11 // 用于 rule属性，必须使用"@{变量名}" 的形式 12 @{color}: blue; 13 } 14 // 用于 选择器，必须使用"@{变量名}" 的形式 15 @{dialog}{ 16 width: 200px; 17 } 18 @{dialog}::after{ 19 content: ': @{hi}@{dear}!'; // 用于 字符串拼接，必须使用"@{变量名}" 的形式 20 } 21 @h: 1000px; 22 // 用于 选择器部件，必须使用"@{变量名}" 的形式 23 .ie-@{suffix}{ 24 @h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。 25 height: @h; // 用于 属性值，两种形式均可使用 26 line-height: 30px; 27 } 28 29 // 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成 30 // 2. 没有先定义后使用的规定； 31 @dialog-border-color: #666; 32 @dialog-border-width: 10px; 33 @dialog-border-width: 1px; // 3. 以最后定义的值为最终值；
最终输出：
1 .dialog { 2 background-color: #888; 3 color: blue; 4 } 5 .dialog { 6 width: 200px; 7 } 8 .dialog::after { 9 content: ': hello there!'; 10 } 11 .ie-fix { 12 height: 30px; 13 line-height: 30px; 14 }
四、gulp编译less
1、安装
全局安装：npm install -g less
项目内安装：npm install gulp-less --save-dev
2、使用
1 var gulp=require("gulp"); 2 var less=require("gulp-less"); 3 4 5 gulp.task("less",function(){ 6 gulp.src('src/css/*.less') 7 .pipe(less()) 8 .pipe(gulp.dest("src/css")); 9 }); 10 11 //监视文件的变化 12 gulp.task("watch",function(){ 13 gulp.watch("src/css/*.less",['less']); 14 });
具体的node.js和less的安装方法，下一篇会详细介绍http://www.cnblogs.com/le220/p/8146480.html
