样式循环

有些时候，在实际项目中，我们经常会将字体、颜色、边距等样式作为公共样式放到一个公共的文件中，然后定义一些列的样式，例如字体大小定义 12px、14px、16px 等等，这样一个一个写会比较麻烦，如果使用循环，几句代码就能实现：

.width(@i) when(@i <= 50) {
  .pt@{i} {
    padding-top: @i + 0px !important;
  }
  .pr@{i} {
    padding-right: @i + 0px !important;
  }
  .pb@{i} {
    padding-bottom: @i + 0px !important;
  }
  .pl@{i} {
    padding-left: @i + 0px !important;
  }
  .p@{i} {
    padding: @i + 0px !important;
  }
  .mt@{i} {
    margin-top: @i + 0px !important;
  }
  .mr@{i} {
    margin-right: @i + 0px !important;
  }
  .mb@{i} {
    margin-bottom: @i + 0px !important;
  }
  .ml@{i} {
    margin-left: @i + 0px !important;
  }
  .m@{i} {
    margin: @i + 0px !important;
  }
  .width((@i + 5));
}

.width(5);