LESS系统学习之知识点

1.less之于css <==> jq之于js

2.less注释 : /**/会编译 //不会编译

3.less变量: @xx;

4.混合(mixins) : 

 .test{
      .border_01;
  }
  .border_01{
      border:solid 1px pink;
  }

//带参数
.border_02(@border_width){
   border : solid pink @border_width;
}
.test{
   .border_02(30px);
}

//默认带值
.border_03(@border_width:10px){
   border : solid pink @border_width;
}
.test{
   .border_03();
}

5.匹配模式

.triangle(top,@w,@c){
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(right,@w,@c){
    border-width: @w;
    border-color: transparent @c transparent transparent;
    border-style: dashed solid dashed dashed;
}
.triangle(bottom,@w,@c){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}
.triangle(left,@w,@c){
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}
.triangle(@_,@w:5px,@c){//@_固定格式
    width: 0;
    height: 0;
    overflow: hidden;
}

和混合搭配使用,混合可引用公用样式，匹配则可以扩展同名样式。
 

6.运算（略）

7.嵌套！！ &

8.@arguments(了解)

9.避免编译（~“”） , important