sass@each 和 @for 能不能结合起来用？

Question

html代码：

<div class="item-list">
          <a href="" class="op-icon-1">订单管理</a>
          <a href="" class="op-icon-2">商品管理</a>
          <a href="" class="op-icon-3">我的店铺</a>
      </div>
      <div class="item-list">
          <a href="" class="op-icon-4">销售统计</a>
          <a href="" class="op-icon-5">代理管理</a>
          <a href="" class="op-icon-6">我的货款</a>
      </div>
      <div class="item-list">
          <a href="" class="op-icon-7">我要进修</a>
          <a href="" class="op-icon-8">客户管理</a>
          <a href="" class="op-icon-9">我要推广</a>
      </div>
      <div class="item-list">
          <a href="" class="op-icon-10">素材公社</a>
          <a href="" class="op-icon-11">升级管理</a>
          <a href="" class="op-icon-12">微谷钱包</a>
      </div>
      

scss代码：

@mixin openShop-icon{
  $List_icon:thesyk_03,thesyk_06,thesyk_09,
  thesyk_18,thesyk_21,thesyk_15,
  thesyk_33,thesyk_27,thesyk_30,
  thesyk_42,thesyk_39;
           @each $animal in $List_icon{
             ::before{
               background-image: url('../../icons/#{$animal}.png');
             }
          }
  }

  a.op-icon-1{
    @include openShop-icon;

  }
  

编译后css：

.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_03.png"); }
.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_06.png"); }
.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_09.png"); }
.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_18.png"); }
.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_21.png"); }
.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_15.png"); }
.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_33.png"); }
.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_27.png"); }
.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_30.png"); }
.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_42.png"); }
.item-list a.op-icon-1 ::before {
  background-image: url("../../icons/thesyk_39.png"); }
.item-list a.op-icon-2 ::before {
  background-image: url("../../icons/thesyk_03.png"); }
.item-list a.op-icon-2 ::before {
  background-image: url("../../icons/thesyk_06.png"); }
.item-list a.op-icon-2 ::before {
...................................}

sass的方法是挺多的，自己有个想法，像
a.op-icon-1{

    @include openShop-icon;

  }

这段代码能不能把1当做一个变量， a.op-icon-1的1能每次递增1到12结束，每次递增后加载的样式是openShop-icon 中的样式，按顺序添加，不要变成 a.op-icon-1循环一遍，openShop-icon也循环一遍。
请问用sass该怎么实现？