less的函数与循环

在有很多类名相似，属性也相似的情况下，我们可以选择用循环的方式写。

<template>
  <div>
    <div class="up up1">up1</div>
    <div class="up up2">up2</div>
    <div class="up up3">up3</div>
    <div class="up up4">up4</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.up{
  width: 100px;
  height: 100px;
  color: #FFF;
}
//定义函数
.backgroundColor(@cllassName,@value){
  .@{cllassName}{
      background: @value;
  }
}
// 定义类名数组
@className:up1,up2,up3,up4;
// 定义取值数组
@backgroundValue:#111,#222,#333,#444;
// 定义循环长度
@length:length(@backgroundValue);
// 循环
.loopBg(@i) when(@i <= @length){
    //调用函数
  .backgroundColor(extract(@className,@i), extract(@backgroundValue,@i));
  .loopBg(@i + 1);
}
// 调用
.loopBg(1);
</style>

效果