1.普通遍历
@colorArr: {
white: white;
primary: #35a0e8;
info: #909399;
success: #67C23A;
danger: #F56C6C
}
each(@colorArr, {
.text-@{key} {
color: @value;
}
.bg-@{key} {
background-color: @value;
}
});
生成的css
2.递归生成
@positionArr: {
l: left;
r: right;
t: top;
b: bottom
}
@step: 10px;
//定义
.loop(@n, @i:1) when (@i <= @n) {
each(@positionArr, {
.p@{key}-@{i} {
padding-@{value}: @step * @i;
}
.m@{key}-@{i} {
margin-@{value}: @step * @i;
}
});
.mx-@{i} {
margin-left: @step * @i;
margin-right: @step * @i;
}
.px-@{i} {
padding-left: @step * @i;
padding-right: @step * @i;
}
.my-@{i} {
margin-top: @step * @i;
margin-bottom: @step * @i;
}
.py-@{i} {
padding-top: @step * @i;
padding-bottom: @step * @i;
}
.p-@{i} {
padding: @step * @i;
}
.m-@{i} {
margin: @step * @i;
}
.loop(@n, (@i + 1));
}
.loop(10);
生成css
我是vue项目,编译完成后在头文件可以看到