less使用ch1--认识语法

@charset "utf-8";

//注释------------------------------
/*我是可以被编译出来的*/
//不能被编译出来

//变量-------------------------------------
@test_width: 300px;

.div{
  width:@test_width;
}

//混合
.border{
  border:1px solid #666;
}
.div2{
  width:@test_width;
  .border;
}
//混合--带参数
.border2(@border_width){
  border:@border_width solid #222;
}
.test-mixin2{
  .border2(2px);
  color:red;
}
//混合--默认带值需要其他值可以传参
.border3(@border_width:2px){
  border:@border_width dotted #333;
  -webkit-border:@border_width dotted #333;
  -moz-border:@border_width dotted #333;
  -ms-border:@border_width dotted #333;
  -o-border:@border_width dotted #333;
}
.test-mixin3{
  .border3;
}
.test-mixin03{
  .border3(1px);
}

//匹配模式----------------------------------------
.sjborder{ //边框三角形:假如需要角朝下,(反方向)上边框设置颜色和solid,其他边框设为透明和dashed
  width:0px;
  height:0px;
  overflow: hidden;

  border-width:5px;
  border-color:red transparent transparent transparent;
  border-style:solid dashed dashed dashed; //兼容ie6黑边问题,没有的边设为dashed
}
//匹配模式--边框三角 上 右 下 左 相当于js的if
.triangle(bottom, @w:5px, @c:#ccc){ //角朝上
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style:dashed dashed solid dashed;
}
.triangle(top, @w:5px, @c:#ccc){ //角朝下
  border-width:@w;
  border-color:@c transparent transparent  transparent;
  border-style:solid dashed dashed dashed;
}
.triangle(right, @w:5px, @c:#ccc){ //角朝左
  border-width:@w;
  border-color:transparent transparent transparent @c;
  border-style:dashed dashed dashed solid;
}
.triangle(left, @w:5px, @c:#ccc){ //角朝右
  border-width:@w;
  border-color:transparent @c transparent transparent;
  border-style:dashed solid dashed dashed;
}
.triangle(@_, @w:5px, @c:#ccc){ //@_ 始终都会匹配的,后面两个参数必须加上
  width:0px;
  height:0px;
  overflow: hidden;
}
//定位例子
.pos(r){
  position: relative;
}
.pos(a){
  position: absolute;
}
.pos(f){
  position: fixed;
}
.autosj1{
  .triangle(right);
  .pos(r);
}
.autosj2{
  .triangle(bottom);
}

//运算---------------------------------------------
@w:100px;
.w300{
  width:@w + 200; //运算没强制带单位，至少一个带就可以
  height:(@w+50)*2;
  background-color:#333 - 10;  //颜色很少运算
}

//嵌套--------------------------------------
ul{   //嵌套层数多的比层数少的加载慢
  li{
    a{
      span{
        color:red;
      }
      &:hover{ //& 代表上一层选择器
        color:yellow;
      }
    }
  }
}

//@arguments 变量-------------------------------
.border-arg(@w:5px, @type:solid, @c:red){
  border:@arguments;
}
.border-arg{
  .border-arg;
}

//避免编译：输出不正确的css语法或使用less不认识的语法（适用于滤镜等）-------
.prevent-compile{
  width: ~'calc(300px - 30px)'; //calc 让浏览器计算不是less计算
}

//!important关键字(所有都会加上important适用于调试)---------------------------------
.bor-im{
  .w300()!important;
}