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

我想更改

UI

组件主题颜色

我认为我的代码可以优化（因为它是重复的），并且很容易为将来添加新的

主题颜色xxx

。例如

主题颜色蓝色

或

主题颜色绿色

但我不知道该怎么办。也许我可以用

@做
什么的

$pink:#FF768C；
$orange:#FF9F00；
$themeColor:#fff！违约
$rootSelector:&；
$imagePath:“../../../images”；
@每一个$name在北云、怀云、男孩、女孩、箭一样的粉红色、箭一样的橙色{
.icon-#{$name}{
背景图片：url（#{$imagePath}/#{$name}@2x.png）；
}
}
&.主题颜色橙色{
$themeColor:$orange；
#{$rootSelector}{
&-确认btn{
背景色：$themeColor；
}
&-选择权{
颜色：$themeColor；
&.主动{
背景色：$themeColor；
}
}
&-统计{
&-头衔{
&：：之前{
@延伸。图标箭头如橙色；
}
}
}
}
}
&.主题颜色粉色{
$themeColor:$粉色；
#{$rootSelector}{
&-确认btn{
背景色：$themeColor；
}
&-选择权{
颜色：$themeColor；
&.主动{
背景色：$themeColor；
}
}
&-统计{
&-头衔{
&：：之前{
@扩展。图标箭头像粉红色；
}
}
}
}
}