less

• 编译器koala
• 注释
  • /**/
  • //
• 变量：
  • @variable_width：500px；
• 混合（mixin）

  • .border{border:1px solid red;
    }
    .box{.border;width:150px;height:150px;background: blue;
    }

    .border_02(@border_width){border:solid #fff @border_width;
    }
    .test_hunhe{.border_02(30px);
    }

    .border_03(@border_width:10px){border:solid #fff @border_width;
    }
    .test_hunhe_03{.border_03();//.border_03(50px);
    }

    .border_radius(@border_radius){-webkit-border-radius:@border_radius;-moz-border-radius:@border_radius;border-radius:@border_radius;
    }.radius_test{.border_radius(20px);width:40px;height:40px;background:green;
    }

• 匹配模式
  • 相当于js中的if

  • .triangle(left,@w:20px,@c:blue)
    {width:0;height: 0;border-width:@w;border-color:transparent transparent transparent @w;border-style: dashed dashed dashed solid;
    }
    .triangle_left{.triangle(left);
    }

     

• 引入less及css
  • @import "a.less";
  • @import (less) "a.less";