scss对象循环和数组循环

对象循环

$obj: (
      (
        bgColor: rgba(22, 93, 255, 0.05),
        contentColor: #165dff,
      ),
      (
        bgColor: rgba(255, 152, 56, 0.05),
        contentColor: #ff9838,
      ),
      (
        bgColor: rgba(51, 199, 8, 0.05),
        contentColor: #4fc72c,
      ),
      (
        bgColor: rgba(255, 22, 80, 0.05),
        contentColor: #ff1650,
      )
    );

    @for $i from 1 through length($obj) {
      $item: nth($obj, $i);
      $bgColor: map-get(
        $map: $item,
        $key: bgColor,
      );
      $contentColor: map-get(
        $map: $item,
        $key: contentColor,
      );
      &:nth-of-type(#{$i}) {
        background: $bgColor;

        .data-item-content {
          color: $contentColor;
        }
      }
    }

数组循环

$obj:#165dff,#ff9838,#4fc72c;

    @for $i from 1 through length($obj) {
      $item: nth($obj, $i);
      &:nth-of-type(#{$i}) {
        background: $item;

        .data-item-content {
          color: $item;
        }
      }
    }