如何优雅实现页面动态样式

Question

如何优雅实现页面动态样式

场景：我有两个div，第一个div内边距30px，第二个内边距20px

想要实现的功能：如何写一个公共样式，可以动态接收参数，在标签里调用时直接传过来我想要的值
如：

<div class="padding(20)"></div>

<style lang='less' >
.padding(e){
   padding:e + 'px'
}
</style>

Answer 1

@list: 5, 10, 15, 20, 30;
each(@list, {
  .pd-@{value} {
    padding: @value * 1px;
  }
})