less 学习实践一

@width:50%;
@hoverColor:#E6E6E6;
@activedColor:#ff1d27;
/*icon+text*/
.grid(@width,@padding,@margintop){
li{
float: left;
width: @width;
padding-top:@margintop;
padding-bottom:2px;
padding-right: @padding;
padding-left: @padding;
text-align: center;
&:hover{
background: @hoverColor;
}
}
.active {
color:@activedColor;
.name{
border-bottom: solid 2px @activedColor;
}
} 
.clear();
}
.clear(){
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}

实习过程中排页面经常会用到浮动，所以自己写了了less通用函数，只要设在调用的地方置元素的宽、内边距、上外边距即可，方便修改。