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封装样式有规律的类选择器-遁地龙卷风的主要内容,如果未能解决你的问题,请参考以下文章