less 轉欄

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);
}