less封装样式有规律的类选择器-遁地龙卷风

Posted 遁地龙卷风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了less封装样式有规律的类选择器-遁地龙卷风相关的知识,希望对你有一定的参考价值。

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;
	[email protected]{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);
  *@number 需大于1
  animation-delay 0.1s
  这样的参数会被认为是一个列表,列表中有两个元素,下标从1开始
  .class-rule和.setAttribute都会在第二个参数大于0的时候递归调用自己
  前者用于类选择器的输出后者用于样式的输出

 

以上是关于less封装样式有规律的类选择器-遁地龙卷风的主要内容,如果未能解决你的问题,请参考以下文章

H5富文本编辑器之初始化用于编辑的DOM-遁地龙卷风

面向过程与面向对象的区别-遁地龙卷风

Jquery实现大于等于且小于等于-遁地龙卷风

float属性导致的margin-top失效-遁地龙卷风

ssh框架整合-NoClassDefFoundError-NoSuchMethodError-遁地龙卷风

Angularjs走了,但生活还是要继续-遁地龙卷风