關於Less的學習筆記

Less簡介部分記錄：

一、 Less是一門CSS預處理語言，它擴充了CSS語言，增長了諸如變量、混合（mixin）、函數等功能，讓CSS更易維護、方便製做主題、擴充，是一種動態樣式語言。
二、 編譯工具：Koala。
三、 註釋（兩種方式）：

/*   此種註釋會被編譯，即此句註釋會出如今編譯好的CSS文件中。 */   
 //   不會被編譯。

四、 變量：
聲明變量：@變量名:值;
五、 混合使用：可帶參數，也可不帶參數。
好處：CSS3兼容性使用，修改方便。
六、 匹配模式：知足條件後才匹配。
七、 運算：可進行加減乘除的運算。

Less代碼學習部分記錄：

一、定義編碼方式：

@charset "utf-8";

二、普通的CSS代碼編寫：

body{
    background-color: cornsilk;
}

三、註釋的區別：

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

四、變量的聲明使用：

@test_width:320px;

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

五、混合：

（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;
}

六、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();
}

七、匹配模式：

（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);
}

八、運算（加減乘除）：

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