$pixel: 5, 10, 15, 20, 25, 30, 40, 50;
$positions: top, right, bottom, left;
$position-class: 't', 'r', 'b', 'l';
@each $item in $pixel {
  @each $p in $positions {
    $index: index($positions, $p);
    $class: nth($position-class, $index);
    //使用 .mt-10,.pt-10
    .m#{$class}-#{$item} {
      margin-#{$p}: $item + px;
    }
    .p#{$class}-#{$item} {
      padding-#{$p}: $item + px;
    }
  }
}

$fontSize: 14, 16, 32;
@each $item in $fontSize{
  //使用 .fs-14,.fs-16
  .fs-#{$item} {
    font-size: #{$item}px;
  }
}

//@for $i from 10 through 32{
//  .fs-#{$i}{
//    font-size: #{$i}px;
//  }
//}
$colors: (
        "yellow": "#FFAA00",
        "green": "#00FF00",
        "blue": "#42BEFD"
);

// 使用@each循环遍历颜色映射
@each $color-name, $hex-value in $colors {
  // 动态生成类名，如.color-blue, .color-green
  .color-#{$color-name} {
    color: #{$hex-value};
  }
}