一、Less
1、简介：
Less是一种动态样式语言，Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数。LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，
也可以借助Node.js或者Rhino在服务端运行。
Less是一个JS库，所以他可以在客户端运行，相对Sass则必须在服务端借助Ruby运行
2、学习方法：
中文网站： http://www.lesscss.net/
英文官网： http://lesscss.org
less源码： https://github.com/cloudhead/less.js
github地址： https://github.com/less/less.js
3、开始理解：
3.1：变量——@变量名:值;
以@作为变量的起始标识，变量名由字母、数字、_和-组成。
没有先定义后使用的规定。
以最后定义的值为最终值。
可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接。
定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式。
存在作用域，局部作用域优先级高于全局作用域。
3、2：简单的例子
使用在线编译方法：
页面中直接引用less的源码，使用javascript动态翻译，这样在开发阶段非常方便，但是在运行阶段会影响效率，建议在开发阶段使用less.js在线处理，项目稳定运行时将less文件预处理。
步骤一：
下载到less.js动态处理.less文件的javascript脚本，下载地址： https://github.com/less/less.js
步骤二：
在页面中引入样式与less.js文件，如下：
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet/less" type="text/css" href="css/noe.less"> <script type="text/javascript" src="js/less.min.js" ></script> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> <div class="div6"></div> </body> </html>
less代码：
@color: #f5f5f5; @ 200px; .div1{ background:@color; } @color: #ff00ff; //覆盖第一次的定义 .div2{ background: @color; } div{ width: @width; height: @width; float: left; border: 1px solid red; }
3、3：混入(Mixins)
类似函数或宏
定义函数，@radius是参数，3px是默认值
.borderRadius(@radius:3px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
使用函数，带参数
#header { .borderRadius(10px); }
不带参数使用默认参数
.btn { .borderRadius}
注意：
a)、可以不使用参数 .wrap(){…} .pre{ .wrap }，也可以使用多个参数
b)、内置变量@arguments代表所有参数(运行时)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; }
注意，在参数没有默认值的前提下使用@arguments调用时必须赋值，否则会导致整个页面内的less语法出错而失效。
c)、Mixins必须使用ID或者类，即#xx或.xx，否则无效。
例示代码：
@color: #f5f5f5; @ 200px; .div1{ background:@color; } @color: #ff00ff; //覆盖第一次的定义 .div2{ background: @color; } div{ width: @width; height: @width; float: left; border: 1px solid red; } //计算 .div3{ height: @width/2; } /*混入(Mixins)*/ /*定义 @width一个参数，@color第二个参数,并且都赋予默认值*/ .circle(@100px, @color:red) { width: @width; height: @width; background: @color; border-radius: @width/2; float: left; } .div(@x:0, @y:0, @blur:1px, @color:#000) { box-shadow: @arguments; } /*调用*/ .div5 { .circle();/*默认值*/ } .div6 { .circle(200px,#fff);/*带参数*/ .div(5px,5px); } .div7 { .circle(300px);/*带一个参数*/ }
3、4：嵌套
允许将多个CSS选择器嵌套在一起，&表示当前选择器的父选择器
#header { &.fl{ float: left; } .mln { margin-left: 0; } } /*生成*/ #header.fl{float: left;} #header .mln {margin-left: 0;}
3、5：运算
/*运算*/ @base: 5%; @filler: @base * 2; @other: @base + @filler; @base-color:lightblue; .cls41{ color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; }
结果：
.cls41 { color: #222222; background-color: #bee9f7; height: 60%; }
3、7：继承
例示代码
/*继承*/ .animal { background-color: black; color: white; } .bear { &:extend(.animal); background-color: brown; } .mouse{ &:extend(.animal); }
编译结果
/*继承*/ .animal, .bear, .mouse { background-color: black; color: white; } .bear { background-color: brown; }
3、8:变量作用域
同一级的变量后者覆盖前者，内部变量优先级高于外部变量，变量只在同一个文件中生效。
/*作用域*/ @len:10px; .cls61{ @len:20px; height:@len; } .cls62{ width:@len; } @len:30px; .cls63{ height: @len; }
编译结果：
.cls61 { height: 20px; } .cls62 { width: 10px; } .cls63 { height: 10px; }
3、9：注释：
/*注释*/ .cls71{ width: 100px; //单行注释，CSS中不允许单行注释，Less允许 height:100px; /* 多行注释，CSS与Less都允许 */ }
结果：
/*注释*/ .cls71 { width: 100px; height: 100px;/* 多行注释，CSS与Less都允许 */ }
3、10：循环：
在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构
.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // 递归调用自身 width: (10px * @counter); // 每次调用时产生的样式代码 } div { .loop(3); // 调用循环 }
编译结果：
div { width: 30px; width: 20px; width: 10px; }
使用循环生成栅格系统
.generate-columns(5); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }
编译结果：
.column-1 { width: 20%; } .column-2 { width: 40%; } .column-3 { width: 60%; } .column-4 { width: 80%; } .column-5 { width: 100%; }
3、11：颜色函数
Less 提供了许多用于转换颜色，处理字符串和进行算术运算的函数
例子：
.cls52 { /*增加一定数值的颜色亮度。*/ background: lighten(blue,20%); }
编译结果：
.cls52 { /*增加一定数值的颜色亮度。*/ background: #6666ff; }