scss，如何优化重复代码以更改UI组件主题颜色？

Question

我想更改UI组件主题颜色。

我认为我的代码可以进行优化（因为它是重复的），并且很容易为将来添加新的theme-color-xxx。例如theme-color-blue或theme-color-green。

但我不知道该怎么做。也许我可以使用@for或其他东西？

$pink: #FF768C;
$orange: #FF9F00;
$themeColor: #fff !default;
$rootSelector: &;
$imagePath: '../../../images';

@each $name in beiyun, huaiyun, boy, girl, arrow-like-pink, arrow-like-orange{
  .icon-#{$name} {
    background-image: url(#{$imagePath}/#{$name}@2x.png);
  }
}

&.theme-color-orange{
    $themeColor: $orange;

    #{$rootSelector} {
      &-confirm-btn{
        background-color: $themeColor;
      }
      &-option{
        color: $themeColor;
        &.active{
          background-color: $themeColor;
        }
      }
      &-stat{
        &-title{
          &::before{
            @extend .icon-arrow-like-orange;
          }
        }
      }
    }
  }

  &.theme-color-pink{
    $themeColor: $pink;
    #{$rootSelector} {
      &-confirm-btn{
        background-color: $themeColor;
      }
      &-option{
        color: $themeColor;
        &.active{
          background-color: $themeColor;
        }
      }
      &-stat{
        &-title{
          &::before{
            @extend .icon-arrow-like-pink;
          }
        }
      }
    }
  }