Less简介部分记录：

1、 Less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充，是一种动态样式语言。
2、 编译工具：Koala。
3、 注释（两种方式）：

 /*   此种注释会被编译，即此句注释会出现在编译好的CSS文件中。 */   //   不会被编译。

4、 变量：
声明变量：@变量名:值;
5、 混合使用：可带参数，也可不带参数。
好处：CSS3兼容性使用，修改方便。
6、 匹配模式：满足条件后才匹配。
7、 运算：可进行加减乘除的运算。

Less代码学习部分记录：

1、定义编码方式：

@charset "utf-8";

2、普通的CSS代码编写：

body{background-color: cornsilk;
}

3、注释的区别：

/* Can see */
// Can't see

4、变量的声明使用：

@test_width:320px;

.box{width: @test_width;height: @test_width;background-color: #FF7F50;
}

5、混合：

（1）不带参数的混合：

.border{border: 10px solid #5F9EA0;
}
.box{.border;
}

（2）带参数的混合：

1）没有默认值，一定要传参：

.border_02(@border_width){border: @border_width solid firebrick;
}
.test_mix{.border_02(30px);
}
.box{.test_mix;
}

2）带默认值：

.border_03(@border_width:20px){border: @border_width solid lightgreen;
}
.test_mix_03{ .border_03();//可以不传参.border_03(50px);//可以传参
}
.box{.test_mix_03;
}

6、CSS3兼容性使用举例：

.border_radius(@radius:8px){-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;
}
.radius_test{width: 200px;height: 120px;background-color: darksalmon;margin-top: 20px;.border_radius();
}

7、匹配模式：

（1）举例：画一个三角形/*画一个三角形的原始方法*/
.triangle{width: 0;height: 0;margin-top: 10px;border-width: 60px;border-color: transparent transparent mediumvioletred transparent;border-style: dashed dashed solid dashed;//解决IE6有黑色边框问题
}/*用匹配模式画三角形*/
.triangle_test(top,@w:60px,@c:mediumvioletred){border-width: @w;border-color: transparent transparent @c transparent;border-style: dashed dashed solid dashed;
}//向上的三角形
.triangle_test(bottom,@w:60px,@c:mediumvioletred){border-width: @w;border-color: @c transparent transparent transparent;border-style: solid dashed dashed dashed;
}//向下的三角形
.triangle_test(left,@w:60px,@c:mediumvioletred){border-width: @w;border-color: transparent @c transparent transparent ;border-style: dashed solid dashed dashed;
}//向左的三角形
.triangle_test(right,@w:60px,@c:mediumvioletred){border-width: @w;border-color: transparent transparent transparent @c;border-style: dashed dashed dashed solid;
}//向右的三角形//@_：代表始终带着这个函数运行
.triangle_test(@_,@w:60px,@c:mediumvioletred){width: 0;height: 0;margin-top: 25px;
}.triangle{
//根据想得到的匹配格式画三角形 .triangle_test(top);.triangle_test(bottom);.triangle_test(left);.triangle_test(right);
//非匹配格式则css代码中只生成@_部分的代码.triangle_test(aaa);
}

（2）举例：定位的使用.pos(r){position: relative;
}
.pos(ab){position: absolute;
}
.pos(f){position: fixed;
}
.test{width: 120px;height: 120px;margin-top: 20px;background-color: gold;.pos(r);.pos(ab);.pos(f);
}

8、运算（加减乘除）：

@test_01: 300px;
.box_02{width: @test_01 + 80;height: @test_01;margin-top: 20px;background-color: deepskyblue;
}