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 see4、变量的声明使用：
@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;}新闻热点
疑难解答
