less变量以及循环输出对变量的引用✨

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

接口返回的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>

// list 大概这样
list: [
    {
      id: 'A01'
    },
    {
      id: 'A02'
    },
    {
      id: 'A03'
    },
    {
      id: 'A04'
    },
    {
      id: 'A05'
    },
]


<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;
}

🎈🎈🎈

🌹 关注我，你会发现一个踏实努力的宝藏前端😊，让我们一起学习，共同成长吧。

🎉 喜欢的小伙伴记得点赞关注收藏哟，回看不迷路 😉

✨ 欢迎大家转发、评论交流

🎊 蟹蟹😊