scss动态生成类名、样式值

常常会有需求 根据不同的状态给元素设置不同的颜色值，类似状态标签等等
如图的标签

用scss的同学,可以用@each指令 完成一系列样式的设置
代码如下：

$colors: (
  blue: #008fff,
  grey: #909299,
  orange: #fa8c16,
  red: #fe5951,
  green: #2ac66a,
);
.status {
   .label {
     &:before {
       content: "";
       display: inline-block;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       margin-right: 6px;
     }
   }

   @each $name, $color in $colors {
     &.#{$name} {
       .label {
         &:before {
           background-color: $color;
         }
       }
     }
   }
 }