请教下这段scss怎么优化

Question

$--color-primary: #0076FB;
$--color-white: #FFFFFF;
$--color-black: #000000;
$--color-success: #52C41A;
$--color-warning: #FAAD14;
$--color-danger: #F5222D;
$--color-info: #CCCCCC;

.text-primary {
  color: $--color-primary !important;
}

.text-white {
  color: $--color-white !important;
}

.text-black {
  color: $--color-black !important;
}

.text-success {
  color: $--color-success !important;
}

.text-warning {
  color: $--color-warning !important;
}

.text-danger {
  color: $--color-danger !important;
}

.text-error {
  color: $--color-error !important;
}

.text-info {
  color: $--color-info !important;
}

想问下，这段代码怎么能优化下呢，感觉有很多重复的地方，又不知道咋改..

Answer 1

可以参考scss的@each

$--color-primary: #0076FB !default;
$--color-white: #FFFFFF !default;
$--color-black: #000000 !default;
$--color-success: #52C41A !default;
$--color-warning: #FAAD14 !default;
$--color-danger: #F5222D !default;
$--color-info: #CCCCCC !default;
@each $name, $color in (text-primary, $--color-primary), (text-white, $--color-white),
  (text-black, $--color-black), (text-success, $--color-success), (text-warning, $--color-warning),
  (text-danger, $--color-danger), (text-error, $--color-danger), (text-info, $--color-info)
{
  .#{$name} {
    color: $color!important;
  }
}

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。