JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Less循环属性

2020. 07. 21    

Less循环属性

编译前(less)

		
@colorList: #cf8aff, #6d87ff, #f66766, #ffd279, #45c8be, #cf8aff,
  #6d87ff, #f66766, #ffd279, #45c8be, #cf8aff, #6d87ff,
  #f66766, #ffd279, #45c8be;
.for(@list, @code) {
  & {
    .loop(@i:1) when (@i =< length(@list)) {
      @value: extract(@list, @i);
      @code();
      .loop(@i + 1);
    }
    .loop();
  }
}
.for( @colorList, {
  .barrageBg@{i} {
    .baberrage-avatar,
    .baberrage-msg {background: @value;}
    }
  }
);

编译后(css)

.barrageBg1 .baberrage-avatar,
.barrageBg1 .baberrage-msg {
  background: #cf8aff;
}
.barrageBg2 .baberrage-avatar,
.barrageBg2 .baberrage-msg {
  background: #6d87ff;
}
.barrageBg3 .baberrage-avatar,
.barrageBg3 .baberrage-msg {
  background: #f66766;
}
.barrageBg4 .baberrage-avatar,
.barrageBg4 .baberrage-msg {
  background: #ffd279;
}
.barrageBg5 .baberrage-avatar,
.barrageBg5 .baberrage-msg {
  background: #45c8be;
}
.barrageBg6 .baberrage-avatar,
.barrageBg6 .baberrage-msg {
  background: #cf8aff;
}
.barrageBg7 .baberrage-avatar,
.barrageBg7 .baberrage-msg {
  background: #6d87ff;
}
.barrageBg8 .baberrage-avatar,
.barrageBg8 .baberrage-msg {
  background: #f66766;
}
.barrageBg9 .baberrage-avatar,
.barrageBg9 .baberrage-msg {
  background: #ffd279;
}
.barrageBg10 .baberrage-avatar,
.barrageBg10 .baberrage-msg {
  background: #45c8be;
}
.barrageBg11 .baberrage-avatar,
.barrageBg11 .baberrage-msg {
  background: #cf8aff;
}
.barrageBg12 .baberrage-avatar,
.barrageBg12 .baberrage-msg {
  background: #6d87ff;
}
.barrageBg13 .baberrage-avatar,
.barrageBg13 .baberrage-msg {
  background: #f66766;
}
.barrageBg14 .baberrage-avatar,
.barrageBg14 .baberrage-msg {
  background: #ffd279;
}
.barrageBg15 .baberrage-avatar,
.barrageBg15 .baberrage-msg {
  background: #45c8be;
}