使用less实现根据类名控制样式

        不知道大家有没有这样一个需求, 就是我在dom上增加'.mr50'这样一个class类名, 那么就对应'margin-right:50px'; 如果是'.mr40'就对应'margin-right:40px'. 其实这个可以通过less的for循环实现. 代码如下

@unit: 1px;
.base(@i) when (@i<=50) {
  @size: @i * 5;
  .base(@i + 1);
  .m@{size} {
    margin: @size*@unit;
  }
  .ml@{size} {
    margin-left: @size*@unit;
  }
  .mr@{size} {
    margin-right: @size*@unit;
  }
  .mt@{size} {
    margin-top: @size*@unit;
  }
  .mb@{size} {
    margin-bottom: @size*@unit;
  }

  .p@{size} {
    padding: @size*@unit;
  }
  .pl@{size} {
    padding-left: @size*@unit;
  }
  .pr@{size} {
    padding-right: @size*@unit;
  }
  .pt@{size} {
    padding-top: @size*@unit;
  }
  .pb@{size} {
    padding-bottom: @size*@unit;
  }
  .top@{size} {
    top: @size*@unit;
  }
  .left@{size} {
    left: @size*@unit;
  }
  .bottom@{size} {
    bottom: @size*@unit;
  }
  .right@{size} {
    right: @size*@unit;
  }
  .indent {
    text-indent: @size*@unit;
  }
}

.base(1);