4.less

变量

• @width:300px;

• @width:300px;
  .box{
   width:@width;
  }

  
  

混合

普通混合

                    

<pre name="code" class="css">.box{
 width:100px;
 height:20px;
  .border;
}

.border{
      border:1px solid red;
}

         带参数的混合

.box{
 width:100px;
 height:20px;
  .border(red);
}

.border(@color){
      border:1px solid @color;
}

         带参数的混合--默认值

.box{
 width:100px;
 height:20px;
  .border();
}

.border(@color：red){
      border:1px solid @color;
}

匹配模式

 

.change(right,@w:10px,@h:20px){
     width:@w;
     height:@h;
     float:right;
}
.change(left,@w:10px,@h:20px){
      width:@w;
     height:@h;
     float:left;
}

//@_代表无论匹配上面哪个模式都会带上下面的样式，后面的参数不能省略，必须和上面的模式保持一致
.change(@_,@w:10px,@h:20px){
      border:1px solid red;
}

.use{
    .change(left);
}

运算

@w:50px;

.box{
     width:(@w-10)*5;
}

嵌套

.list{
   width:100px;
   color:red;
   
    li{
        color:green;
     }
}

.a{
   //&代表上一层选择器
   &:hover{
        color:red;
   }
}

@arguments变量

.border(@w:1px,@s:solid,@c:red){
        border:@arguments;
}