less混合条件表达式循环变量生成css样式

gooood个人博客网站

JavaScript

最近自己封装了一套css UI样式组件，需要写大量的css样式代码！然后less正好派上了用场，节省了不少时间和代码量。以下是通过less混合条件表达式循环遍历编译前和编译后的样式代码
less表达式：
.padding(@counter) when (@counter > 0) { .padding((@counter - 1)); .padding-@{counter}{ padding: (0px+@counter); } } .padding(10); // launch the loop 编译后的css:
.padding-1 { padding: 1px; } .padding-2 { padding: 2px; } .padding-3 { padding: 3px; } .padding-4 { padding: 4px; } .padding-5 { padding: 5px; } .padding-6 { padding: 6px; } .padding-7 { padding: 7px; } .padding-8 { padding: 8px; } .padding-9 { padding: 9px; } .padding-10 { padding: 10px; }