第128天：less简单入门

一、预处理 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中的变量有以下规则：

1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
2. 没有先定义后使用的规定；
3. 以最后定义的值为最终值；
4. 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
5. 定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
6. 存在作用域，局部作用域优先级高于全局作用域。

Note:注意直接拷贝网页中代码可能因为一些空白符的原因导致编译出错。

less源码

 @color: color;
   @dialog: .dialog;
   @suffix: fix;
   // 空格将被忽略，若要保留空格则需要使用单引号或双引号
   @hi: 'hello ';
   @dear: there  ;

   .dialog{
   // 用于 rule属性部件，必须使用"@{变量名}" 的形式
      background-@{color}: #888;
      // 用于 rule属性，必须使用"@{变量名}" 的形式
      @{color}: blue;
   }
   // 用于 选择器，必须使用"@{变量名}" 的形式
   @{dialog}{
      width: 200px;
   }
   @{dialog}::after{
      content: ': @{hi}@{dear}!';    // 用于 字符串拼接，必须使用"@{变量名}" 的形式
   }
   @h: 1000px;
   // 用于 选择器部件，必须使用"@{变量名}" 的形式
   .ie-@{suffix}{
      @h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。
      height: @h; // 用于 属性值，两种形式均可使用
      line-height: 30px;
   }

   // 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
   // 2. 没有先定义后使用的规定；
   @dialog-border-color: #666;
   @dialog-border-width: 10px;
   @dialog-border-width: 1px; // 3. 以最后定义的值为最终值；

最终输出：

 .dialog {
   background-color: #888;
   color: blue;
 }
 .dialog {
   width: 200px;
 }
 .dialog::after {
   content: ': hello there!';
 }
 .ie-fix {
   height: 30px;
   line-height: 30px;
 }

四、gulp编译less

1、安装

全局安装：npm install -g less

项目内安装：npm install gulp-less --save-dev

2、使用

 var gulp=require("gulp");
 var less=require("gulp-less");

 gulp.task("less",function(){
 gulp.src('src/css/*.less')
 .pipe(less())
 .pipe(gulp.dest("src/css"));
 });

 //监视文件的变化
 gulp.task("watch",function(){
 gulp.watch("src/css/*.less",['less']);
 });

具体的node.js和less的安装方法，下一篇会详细介绍http://www.cnblogs.com/le220/p/8146480.html