less中非常有用的函数each

记录下each的作用，方便以后查阅，在平时开发中，需要对众多兄弟元素设置部分样式修改，使用each函数非常方便，比如说ul 中li元素，我需要给每个设置相同宽高，但是背景颜色不同，我们需要一个一个对元素命名，修改背景颜色，今天就用each函数处理下：

@colors: #ffffff, #0bdaee, #e9ee0b, #eeae0b, #ff0700;

  each(range(5), {

    .fire-@{value} {

      right: 8.15rem - (@value * 0.2 - 0.1) * 3.35rem;

      fill:extract(@colors,@value)

    }

  });

 1、@color 大家都知道是对颜色定义变量 这个变量类似于js里面数组；

 2、each函数接收一个参数，用于对每个元素命名，range函数，是一个范围函数，这里传的是5，代表范围是从1到5之间，.fire-@{value}，.fire-是在页面元素属性css定义的一个类名前缀，value是给一个类名匹配的值，这里匹配的就是.fire-1、.fire-2、.fire-3、.fire-4、.fire-5，为这5个类名加上上面的属性，就不用每个都去命名了。

3、extract函数有提取的功能，接收两个参数，第一个参数是 list,第二个参数是取list中第几个元素，记住这里默认是从1开始取的，而不是0；

下面是如何在vue页面中引用这个变量：

<ul>

    <li :class="'fire-' + (index+1)"  v-for="(item,index) in  list"></li>

</ul>

参考地址：https://lesscss.com.cn/functions/#list-functions-each