.loop(@counter) when (@counter >= 0){
.m-@{counter}{
margin: (1px * @counter);
}
.loop((@counter - 1)); //递归
}
.loop(6); //调用
编译结果:
.m-6 {
margin: 6px;
}
.m-5 {
margin: 5px;
}
.m-4 {
margin: 4px;
}
.m-3 {
margin: 3px;
}
.m-2 {
margin: 2px;
}
.m-1 {
margin: 1px;
}
.m-0 {
margin: 0px;
}
占位符:
.flex{
display: flex;
&.flex-col{
flex-direction: column;
}
&.row-sb{
justify-content: space-between;
}
}
编译结果:
.flex {
display: flex;
}
.flex.flex-col {
flex-direction: column;
}
.flex.row-sb {
justify-content: space-between;
}