less变量以及循环的使用

前言

接口返回的list信息，每个list在页面的颜色显示不一样，包括字体颜色呀、项目符号呀（类似无序列表前面的小点点）等等。

不用less循环编写css

首先肯定是要用for循环处理list输出内容，考虑颜色不一致，就定义了一些颜色变量，循环list的时候给每一项设置不同的class名（以id结尾的class name），然后分别给每一项编写不同的css。会是如下的情况👇

<template>
  <div v-for="item in list" :key="item.id">
    <span :class="`symbol-${item.id}`">
      {{item.id}}
    </span>
  </div>
</template>
...
<style lang='less' rel='stylesheet/less' scoped>
.symbol-A01 {
  background: #4760f0;
}
.symbol-A02 {
  background: #ff7249;
}
.symbol-A03 {
  background: #9c60fd;
}
.symbol-A04 {
  background: #49deff;
}
.symbol-A05 {
  background: #7da1fe;
}
</style>

发现写了很多重复性的东西，本能的想到可以通过循环处理。Less早就考虑到了，来看一下怎么实现吧👇

less循环输出样式

// 定义颜色变量
@A01: #4760f0;
@A02: #ff7249;
@A03: #9c60fd;
@A04: #49deff;
@A05: #7da1fe;
.loopSymbol(@count) when (@count > 0) {
  .loopSymbol((@count - 1));
  .symbol-A0@{count} {
    // background: '@{A0@{count}}'; // 这种写法输出的色值带引号: background: '#4760f0';
    @id:'A0@{count}';
    background: @@id; // 引用
  }
}
.loopSymbol(5);

说明：首先定义颜色变量，然后代码整体的目的就是循环输出 class style，class name可以通过变量控制，比较难办的是在background属性值的处理上，要根据循环输出变量的同时，引用事先定义好的颜色变量

搞定，是不是看着挺高级的。
这样写也方便管理颜色变量，如果ui有变化的话，直接修改变量就好了

效果展示

下面，看一下上面less代码的输出

# 全局安装less
npm install less -g
# 进入项目目录，编译less文件
lessc index.less index.css

查看输出的index.css文件

.symbol-A01 {
  background: #4760f0;
}
.symbol-A02 {
  background: #ff7249;
}
.symbol-A03 {
  background: #9c60fd;
}
.symbol-A04 {
  background: #49deff;
}
.symbol-A05 {
  background: #7da1fe;
}