1. 程式人生 > >less封裝樣式有規律的類選擇器-遁地龍卷風

less封裝樣式有規律的類選擇器-遁地龍卷風

.class css樣式 brush ani rule att 解決 ber 生成

1.解決的問題

.class-rule(p,2,width 20px animation-dely 0.1s);可以生成下列css樣式

.p2 {
  animation-dely: 0.2s;
  width: 40px;
}
.p1 {
  animation-dely: 0.1s;
  width: 20px;
}

2.less 代碼

.class-rule(@name,@number,@rest) when(@number > 0){
	
	@max-index:length(@rest) / 2;
	.@{name}@{number}{
		.setAttribute(@max-index,@number,@rest,@name);
} .class-rule(@name,@number - 1,@rest); .setAttribute(@index,@number,@rest,@name) when(@index > 0){ @initialValue:extract(@rest,(@index - 1) * 2 + 2); @attribute:extract(@rest,(@index - 1) * 2 + 1); @{attribute}:@initialValue * @number; .setAttribute(@index - 1,@number,@rest,@name); } }

  .class-index(p,3,animation-delay 0.1s );
  .class-index(p,3,animation-delay 0.1s width 20px);
[email protected] 需大於1
  animation-delay 0.1s
  這樣的參數會被認為是一個列表,列表中有兩個元素,下標從1開始
  .class-rule和.setAttribute都會在第二個參數大於0的時候遞歸調用自己
  前者用於類選擇器的輸出後者用於樣式的輸出

less封裝樣式有規律的類選擇器-遁地龍卷風