less 循环 让公用样式变的更简单

工作中的公用样式代码比如： 

不需要重复定义 一次定义重复使用

需要的话自取

 

.cont(@count) when (@count > 0) {
.cont((@count - 1));
@c:2 * @count;
@d:(2px * @count);
.g-mb@{c}{
margin-bottom: @d;
}
.g-ml@{c}{
margin-left: @d;
}
.g-mr@{c}{
margin-right: @d;
}
.g-mt@{c}{
margin-top: @d;
}
.g-m@{c}{
margin-top: @d;
}
.g-pb@{c}{
padding-bottom: @d;
}
.g-pl@{c}{
padding-left: @d;
}
.g-pr@{c}{
padding-right: @d;
}
.g-pt@{c}{
padding-top: @d;
}
.g-p@{c}{
padding: @d;
}
.g-f@{c}{
font-size: @d;
}
}

.cont(3);

　　

　　结果

 

 

.g-mb2 {
  margin-bottom: 2px;
}
.g-ml2 {
  margin-left: 2px;
}
.g-mr2 {
  margin-right: 2px;
}
.g-mt2 {
  margin-top: 2px;
}
.g-m2 {
  margin-top: 2px;
}
.g-pb2 {
  padding-bottom: 2px;
}
.g-pl2 {
  padding-left: 2px;
}
.g-pr2 {
  padding-right: 2px;
}
.g-pt2 {
  padding-top: 2px;
}
.g-p2 {
  padding: 2px;
}
.g-f2 {
  font-size: 2px;
}
.g-mb4 {
  margin-bottom: 4px;
}
.g-ml4 {
  margin-left: 4px;
}
.g-mr4 {
  margin-right: 4px;
}
.g-mt4 {
  margin-top: 4px;
}
.g-m4 {
  margin-top: 4px;
}
.g-pb4 {
  padding-bottom: 4px;
}
.g-pl4 {
  padding-left: 4px;
}
.g-pr4 {
  padding-right: 4px;
}
.g-pt4 {
  padding-top: 4px;
}
.g-p4 {
  padding: 4px;
}
.g-f4 {
  font-size: 4px;
}
.g-mb6 {
  margin-bottom: 6px;
}
.g-ml6 {
  margin-left: 6px;
}
.g-mr6 {
  margin-right: 6px;
}
.g-mt6 {
  margin-top: 6px;
}
.g-m6 {
  margin-top: 6px;
}
.g-pb6 {
  padding-bottom: 6px;
}
.g-pl6 {
  padding-left: 6px;
}
.g-pr6 {
  padding-right: 6px;
}
.g-pt6 {
  padding-top: 6px;
}
.g-p6 {
  padding: 6px;
}
.g-f6 {
  font-size: 6px;
}

　　

 颜色数组

 

@list: red, white, black, green, yellow, blue, purple, grey, brown, pink, gold, orange;

.generate-columns(length(@list));
.generate-columns(@n, @i: 1) when (@i =< @n) {
  @v:extract(@list, @i);
  .g-@{v} {
     color: extract(@list, @i);
  }
  .generate-columns(@n, (@i + 1));
}

 

　　

 

　　生成

.g-red {
  color: red;
}
.g-white {
  color: white;
}
.g-black {
  color: black;
}
.g-green {
  color: green;
}
.g-yellow {
  color: yellow;
}
.g-blue {
  color: blue;
}
.g-purple {
  color: purple;
}
.g-grey {
  color: grey;
}
.g-brown {
  color: brown;
}
.g-pink {
  color: pink;
}
.g-gold {
  color: gold;
}
.g-orange {
  color: orange;
}