@w:100px;
@h:100px;
div{
width: @w;
height: @w=h;
border:1px solid red
}
//混合模式
.border(@w:2px){
border:@w solid red;
}
div{
width:10px;
height:10px;
.border(2px);
}
//模糊匹配:会模糊匹配
.style(top,@w:2px,@color:green){
border-top:@w solid @color
}
.style(bottom,@w:2px,@color:red){
border-bottom:@w solid @color
}
div{
width:@w;
height:@h;
.style(top)
}
//可以做四则运算
/*
<div>
<P>
<span>
<a>
</a>
</span>
</p>
</div>
*/
div{
span{
// 可以直接设置样式
color:red;
a{
color:blue
//&表示上一级:即a有hover事件
&:hover{
color:pinnk
}
}
}
}
文章来源: Less的使用