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;}新聞熱點
疑難解答
