极简完成一个列表N个跳色

有的时候设计小姐姐非常的任性，给出一大堆颜色千奇百怪的toolbar，怎么办？
好气喔，还是得认认真真的画

首先看 效果如下

781543312360_.pic.jpg

我们不用给每一个btn单独添加bg色值，一个:nth-child就可以完美实现，以下描述的地方我们统称为nth，前情提要，我使用的css预处理器是stylus，下面的变量将都会以stylus的语法陈述

nth是css3的伪类选择器大致用法有以下几种
1、指定数值
举例说明： 1）需求-将一个列表中的第1(x)项标记红色
实现
//声明方法
add(a)
a = unit(a,px)
bg()
background arguments

    .tab-group 
        height add(200)
        display flex
        align-items $ct
        justify-content $ct

        .tab-items
            height add(80)
            width add(80)
            line-height add(40)
            border-radius add(40)
            margin-right add(20)
            text-align ct
            bg(base-col)
            
            &:nth-child(1)
                bg(col1)

效果：

791543313511_.pic.jpg

2.指定周期
举例说明： 1）需求-列表实现单双色轮换
实现
&:nth-child(2n)
bg(col4)
或 &:nth-child(even)
bg(col4)
效果：

831543315695_.pic.jpg
3.周期分组
举例说明：1）需求-列表实现三色一组轮换

实现
&:nth-child(3n+1)
bg(col4)
&:nth-child(3n+2)
bg(col5)
&:nth-child(3n+3)
bg(col6)
效果：

841543317015_.pic.jpg

这里的n我是这样理解的 n就是一个组 2n就是两个元素一组 3n就是三个元素一组，以此类推，+-的基准都是以当前组的第一个元素开始计算，当然超过组别大小会跑到隔壁组进行渲染 比如
&:nth-child(2n+4)
bg($col4)
效果：

861543317673_.pic.jpg

歪！ 你跑到隔壁去啦！

有了这个神器，只需要定义好颜色值，不管多么眼花缭乱的效果，都给设计小姐姐完成的漂漂亮亮的，并且不需要添加许许多多low炸天的style1，style2，style3，想class名想的头要炸裂有木有
给自己强化一下，所以做个笔记，还有一些用法我没有一一列举，个人感觉这三个 就很实用啦 有什么错误欢迎友好指正！
不准很凶！