less的使用

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

   }

7.匹配模式--定位例子

   .pos(r){

   position:relative;

   }

   .pos(a){

   position:absolute;

   }

  .pos(f){

   position:fixed;

   }

  .pipei{

   width:200px;

   height:200px;

   background-color:green;

   .pos(f);

  }

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;

    }

11.避免编译

  *有时候我们需要输出一些不正确的CSS语法或者使用一些less不认识的专有语法。

  *要输出这样的值我们可以在字符串前加上一个 ~

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

  less文件中：

  .test_03{

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

  }

  css中：

  .test_03{

  width:calc(300px-30px);

  } 

12.！important以及总结

   ! important关键字

   -会为所以混合所带来的样式，添加上！important