less 循环生成公共样式————less

less 公共样式编写————less

@widthList: 10, 20, 30, 40, 50, 60;
@heightList: 10, 20, 30, 40, 50, 60;
@spacingList: 5, 10, 15, 20, 25, 30, 35, 40, 45, 60;
@directionShort: l, r, t, b;
@direction: left, right, top, bottom;

基本变量定义。利用循环遍历生成 n 个样式

//基础循环编写。构建一个函数，循环往里面放值。
.generWidth(@i) when (@i < length(@widthList)+1) { //循环遍历
    .widths(extract(@widthList, @i)); //extract(数组，编号)   
    .generWidth(@i+1);
}
.widths(@size) {
    .w-@{size} {
        width: unit(@size, px);
    }
}

//最后引用

body {
    .generWidth(1);
}
//就是这么简单。。     生成.w-10{width:10px}  .w-20{width:20px}.....
//按这种写法同理，可以写下如 ：p-l-20{padding-left:20px} 等公共样式

最后生成的样式：（可以直接引用less，不必生成，这里只是给大家看个效果！）