学习LESS

变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

@color:#4D926F;
@bgcolor:gray;
.header{
     background:@bgcolor;
     height:20px;
}
h2{
    color:@color;
}

混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
使用这条规则时，如果参数不传任何数进去，则使用自带的参数。

.rounded-corners(@radius:5px){  
    border-radius:@radius;  
    -webkit-border-radius: @radius;  
    -moz-border-radius: @radius;  
    height:50px;  
    background:@bgcolor;}
.test2{  
    .rounded-corners;
}
.test3{  
    .rounded-corners(10px);
}

嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

.test4{  
    h1{    font-size:26px;    font-weight:bold;  }  
    p{    font-size:12px;    
        a{      text-decoration: none;      
                &:hover{border: 1px solid black;}    
  }}}

函数 & 运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。
@the-border:1px;
@base-color:#111;
@red: #842210;

.test5{  width:200px;  
    height:200px;  
    border-style: solid;  
    border-color: @red;  
    color:@base-color *3;  
    border-left-width: @the-border;  
    border-right-width:@the-border*5;  
    border-right-color: desaturate(@red,50%);}