less 循环 2017年5月24日

用来循环生成同级元素的颜色不一样的循环方法： （用到了less的一个内置函数）；

1. 声明 数组:

@list:#000,#fff,#09c,#fafafa,#999;

2 . 写less循环，

//定义@length 变量； 通过判断@length是否大于6来决定循环是否继续进行下去.child(@length) when (@length < 6){     //@{length} 可以将@length 动态输出；    &:nth-child(@{length}){                                      // 运用less内置函数 读取@list的对应@length的值；		color:extract(@list, @length);	}        //每循环一次改变一次@length；	.child(@length + 1);                          }/* 调用循环 */div{	.child(1);}

3. 输出结果

//这里输入代码 从1 到 5；div:nth-child(1) {  color: #000;}div:nth-child(2) {  color: #fff;}div:nth-child(3) {  color: #09c;}div:nth-child(4) {  color: #fafafa;}div:nth-child(5) {  color: #999;}/* 当@length最后的数与@list的length大的时候 它会把@list全部取出来 例：*/div:nth-child(6) {  color: extract(#000, #fff, #09c, #fafafa, #999, 6);}