HLJ 发布于
2018-08-15 09:13:14

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

上一篇文章:

关于axios发送两次请求

下一篇文章:

AngularJS小写过滤器代码

最近自己封装了一套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;
} 
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-08-15/88.html
最后生成于 2024-05-27 22:52:52
上一篇文章:

关于axios发送两次请求

下一篇文章:

AngularJS小写过滤器代码

此内容有帮助 ?
0