less 预处理器

规范
1、定义变量时冒号（:）与变量值之间必须（MUST）保留一个空格，冒号前不得（MUST NOT）保留空格。如：错误color:@box_width; 正确color: @box_width; 
2、变量命名必须采用 @foo-bar 形式，不得使用 @fooBar 形式。

定义变量
@box_width:100px;    注：100px不用双引号括起来
        
.box{         
    color: @box_width;    
}

变量的运算
在运算中只要变量写了单位，参与运算的值可以不写单位，如果写了其他单位，也会按变量定义的单位编译。

@test_width:200px;  
@test_height:200px;     
div{         
    width: @test_width+200;         
    height: @test_height+200em;     
}

选择器的嵌套
1、嵌套写法
ul {     
    width: 200px;
} 
ul li{     
    width: 100px;
} 
写成：
ul {
    width: 200px;
    li {
        widht:100px;
    }
}

2、使用&来将伪类嵌套在对应选择器内
ul li:hover {
    color: red;  
}
写成：
ul {     
    &:hover{             
        color: red;        
    } 
}