less基本知识总结

> 一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点
> [官网](http://lesscss.org/)
> [中文网](http://lesscss.cn/)
> http://www.w3cplus.com/css/less
一.概要
(1)为什么要有预处理CSS
CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。
很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。
(2)什么是预处理CSS
a.CSS语言的超集，比CSS更丰满
a.CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
c.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预处理器。

二. 如何使用预处理Less
1. less.js

(1)> 网页运行阶段解析LESS文件
 使用方式：less compiler

1 (切换路径）>lessc main.less>main.css

(2)> 开发阶段编译LESS文件成为CSS

使用方式：

- 安装Node.js
- 安装less
    + 命令行执行：npm install -g less
三.less的 注释
// 模板注释，这里的注释转换成CSS后将会删除
/* CSS 注释语法 转换为CSS后任然保留 */
四.定义变量

> 将需要重复使用或经常修改的值定义为变量，需要使用的地方引用

 1   @变量名: 变量值;
 2   @bgColor: #f5f5f5;
 3 
 4   body{
 5      @变量名;
 6     background-color: @bgColor;
 7   }
 8   body{
 9      变量值;
10     background-color: #f5f5f5;
11   }

五.嵌套

> 如果你在CSS中经常使用子代选择器，那LESS的嵌套语法使用起来非常Happy

 1  .container {
 2      @containerWidth;
 3     > .row {
 4       height: 100%;
 5       a{
 6         color: #f40;
 7         &:hover{
 8           color: #f50;
 9         }
10       }
11     }
12     div {
13        100px;
14       .hello {
15         background-color: #00f;
16       }
17     }
18   }

 1  .container {
 2      1024px;
 3   }
 4   .container > .row {
 5     height: 100%;
 6   }
 7   .container > .row a {
 8     color: #f40;
 9   }
10   .container > .row a:hover {
11     color: #f50;
12   }
13   .container div {
14      100px;
15   }
16   .container div .hello {
17     background-color: #00f;
18   }

六.混合Mixin

 1 /* 定义一个类 */
 2 .roundedCorners(@radius: 5px) {
 3   -moz-border-radius: @radius;
 4   -webkit-border-radius: @radius;
 5   border-radius: @radius;
 6 }
 7 /* 定义的类应用到另个一个类中 */
 8 ＃header {
 9   .roundedCorners;
10 }
11 #footer {
12   .roundedCorners(10px);
13 }


七. Import

> 我们可以在开发阶段将样式放到多个文件中，最后通过@import 的方式合并;注意：异步请求的时候必须在http下面使用；

 1   // main.less
 2   @btnColor: red;
 3   @import url('_buttom.less');
 4   
 5   body{
 6      1024px;
 7   }
 8 
 9   // _buttom.less
10   .btn{
11     color: @btnColor;
12   }
13   .btn{
14     color: red;
15   }
16   body{
17      1024px;
18   }

案例代码：

 1 // hello less
 2 // 定义一个变量
 3 // @mainColor: #e92322;
 4 // @ 200px;
 5 // /* 公共样式 */
 6 // body {
 7 //   background-color: @mainColor;
 8 // }
 9 // .container {
10 //    1000px;
11 //   background-color: #ff0;
12 //   .row {
13 //     height: @width;
14 //     div {
15 //       border-left: 1px solid @mainColor;
16 //       > a {
17 //         color: red;
18 //         &:hover {//相当于this;不加&有空格，不实现效果
19 //           color: green;
20 //         }
21 //       }
22 //     }
23 //   }
24 // }
25 /* 定义一个类 */
26 // // 定义一个代码段，（）里的内容是参数，参数中:后的内容是参数的默认值（没有传参数）
27 // .roundedCorners(@radius: 5px) {
28 //   -moz-border-radius: @radius;
29 //   -webkit-border-radius: @radius;
30 //   border-radius: @radius;
31 // }
32 // /* 定义的类应用到另个一个类中 */
33 // #header {
34 //   .roundedCorners();
35 // }
36 // #footer {
37 //   .roundedCorners(10px);
38 // }
39 //
40 // @h: 100px;
41 // @import url('_p.less');
42 body {
43   background-color: lighten(#000, 10%);
44   color: darken(#fff, 10%);
45 }

八.函数

内置函数

1 - lighten：将一个颜色变亮
2   + lighten(#000, 10%); // #1a1a1a
3 - darken：将一个颜色变暗
4   + darken(#000, 10%); // #e6e6e6