less的用法

1.注釋：less的注釋有兩種

     一種是: /* 會被編譯的 */   

    另一種是: //不會被編譯的

    會不會被編譯是指這個注釋的文字會不會顯示在該less文件所對應的CSS文件上

2.變量

   @test_width:300px;

   .box{

    width:@test_width;

    height:@test_width;

    }

  聲明變量：一定要用@開頭   @變量名：值;

3.混合

   .box{

    width:300px;

    hight:300px;

    .border; //混合下面的border

     }

   .border{

    border:solid  5px  pink;

    }

   .box2{

    .box;

    margin-left:100px;

    }

4.混合--帶參數

   .border_02(@border_width){

    border:solid  yellow  @border_width;

    }

   .test_hunhe{

    .border_02(30px);

    }

5.混合--默認帶值

   .border_03(@border_width:10px){

    border:solid  yellow  @border_width;

   }

   .test_hunhe_03{

   .border_03();

   }

主意：如果混合有默認值，使用時可以不用傳參。如果沒有默認值，則必須傳參。

有默認值時，如需要改變值，則傳遞需要傳入的數值，其余未傳入的值則使用默認值。

6.匹配模式

    .sanjiao{  //向上三角形的畫法

    width:0;

    height:0;

    overflow:hidden;   

    border-width:10px;

    border-color: transparent transparent red transparent

    border-style: dashed dashed solid  dashed ;

    }

   .triangle(top,@w:5px,@c:#ccc){ //向上的三角

    border-width:@w;

    border-color: transparent transparent @c transparent;

    border-style: dashed dashed solid  dashed ;

   }

   .triangle(bottom,@w:5px,@c:#ccc){//向下的三角

    border-width:@w;

    border-color: @c transparent transparent transparent;

    border-style: solid dashed dashed dashed ;

   }

   .triangle(left,@w:5px,@c:#ccc){//向左的三角

    border-width:@w;

    border-color: transparent @c transparent transparent;

    border-style: dashed solid dashed dashed ;

   }

   .triangle(right,@w:5px,@c:#ccc){//向右的三角

    border-width:@w;

    border-color: transparent transparent transparent @c ;

    border-style: dashed dashed dashed solid ;

   }

   triangle(@_,@w:5px,@c:#ccc){  //如下代碼不管能否匹配到數值，都會顯示出來

    width:0;

    height:0;

    overflow:hidden; 

   }

   sanjiaoxing{ //畫三角形，傳值進入進行匹配

   .triangle(top,100px);

   }

   .pos(r){

   position:relative;

   }

   .pos(a){

   position:absolute;

   }

  .pos(f){

   position:fixed;

   }

8.運算

  @test_01:300px;

  .box_02{

  width: (@test_01 - 20) * 2;  //運算過后得到的值為：width:560px;

  color: #ccc-10;  //變成了c2c2c2，顏色也是可以進行運算的，只是比較少運動到

  }

9.嵌套規則

   --最有意思的小東西了

   --兩種用法

   *& 對尾類使用

    - hover 或 focus

   *對連接的使用

    - &-item

   list{

   li{

   height:30px;

   wight:30px;

   }

   a{

   float:left;

   //& 代表他的上一層選擇器

   &:hover{

    color:red;

    }

    }

   span{

   float:right;

   }

  }

把 a 和 span嵌套到list里面。

10. @arguments變量

  *@arguments包含了所有傳遞進來的參數。

   .border_arg(@w:30px,@c:red,@xx:solid){

       border:@arguments;

   }

   .test_arguments{

       .border_arg(40px);

   }

  所對應的CSS文件顯示的是：

   .test_arguments{

       border:40px,red,solid;

    }

  *有時候我們需要輸出一些不正確的CSS語法或者使用一些less不認識的專有語法。

  *要輸出這樣的值我們可以在字符串前加上一個 ~

   列如：width：~‘calc(100%-35)’

  less文件中：

  .test_03{

  width:~'calc(300px-30px)'

  }

  css中：

  .test_03{

  width:calc(300px-30px);

  } 

12.！important以及總結

   ! important關鍵字

   -會為所以混合所帶來的樣式，添加上！important