$spacing-sizes: ();
// 间距变量
@for $i from 0 through 100 {
  $spacing-sizes: map-merge(
    $spacing-sizes,
    (
      $i: #{$i}px,
    )
  );
}

// 生成 margin 工具类
@each $size, $value in $spacing-sizes {
  .m-#{$size} {
    margin: $value;
  }
  .mt-#{$size} {
    margin-top: $value;
  }
  .mr-#{$size} {
    margin-right: $value;
  }
  .mb-#{$size} {
    margin-bottom: $value;
  }
  .ml-#{$size} {
    margin-left: $value;
  }
  .mx-#{$size} {
    margin-left: $value;
    margin-right: $value;
  }
  .my-#{$size} {
    margin-top: $value;
    margin-bottom: $value;
  }
}
// 生成负 margin 工具类
@each $size, $value in $spacing-sizes {
  .-m-#{$size} {
    margin: -$value;
  }
  .-mt-#{$size} {
    margin-top: -$value;
  }
  .-mr-#{$size} {
    margin-right: -$value;
  }
  .-mb-#{$size} {
    margin-bottom: -$value;
  }
  .-ml-#{$size} {
    margin-left: -$value;
  }
  .-mx-#{$size} {
    margin-left: -$value;
    margin-right: -$value;
  }
  .-my-#{$size} {
    margin-top: -$value;
    margin-bottom: -$value;
  }
}

// 生成 padding 工具类
@each $size, $value in $spacing-sizes {
  .p-#{$size} {
    padding: $value;
  }
  .pt-#{$size} {
    padding-top: $value;
  }
  .pr-#{$size} {
    padding-right: $value;
  }
  .pb-#{$size} {
    padding-bottom: $value;
  }
  .pl-#{$size} {
    padding-left: $value;
  }
  .px-#{$size} {
    padding-left: $value;
    padding-right: $value;
  }
  .py-#{$size} {
    padding-top: $value;
    padding-bottom: $value;
  }
}

// 生成 gap 工具类
@each $size, $value in $spacing-sizes {
  .gap-#{$size} {
    gap: $value;
  }
}

// 生成响应式 margin 工具类
// @each $size, $value in $spacing-sizes {
//   @each $bp, $bp-value in $breakpoints {
//     .m-#{$bp}-#{$size} {
//       @media (min-width: $bp-value) {
//         margin: $value;
//       }
//     }
//     .mt-#{$bp}-#{$size} {
//       @media (min-width: $bp-value) {
//         margin-top: $value;
//       }
//     }
//     .mr-#{$bp}-#{$size} {
//       @media (min-width: $bp-value) {
//         margin-right: $value;
//       }
//     }
//     .mb-#{$bp}-#{$size} {
//       @media (min-width: $bp-value) {
//         margin-bottom: $value;
//       }
//     }
//     .ml-#{$bp}-#{$size} {
//       @media (min-width: $bp-value) {
//         margin-left: $value;
//       }
//     }
//     .mx-#{$bp}-#{$size} {
//       @media (min-width: $bp-value) {
//         margin-left: $value;
//         margin-right: $value;
//       }
//     }
//     .my-#{$bp}-#{$size} {
//       @media (min-width: $bp-value) {
//         margin-top: $value;
//         margin-bottom: $value;
//       }
//     }
//   }
// }

// // 响应式断点
// $breakpoints: (
//   sm: 576px,
//   md: 768px,
//   lg: 992px,
//   xl: 1200px,
// );

// 生成响应式 padding 工具类
// @each $size, $value in $spacing-sizes {
//     @each $bp, $bp-value in $breakpoints {
//       .p-#{$bp}-#{$size} {
//         @media (min-width: $bp-value) {
//           padding: $value;
//         }
//       }
//       .pt-#{$bp}-#{$size} {
//         @media (min-width: $bp-value) {
//           padding-top: $value;
//         }
//       }
//       .pr-#{$bp}-#{$size} {
//         @media (min-width: $bp-value) {
//           padding-right: $value;
//         }
//       }
//       .pb-#{$bp}-#{$size} {
//         @media (min-width: $bp-value) {
//           padding-bottom: $value;
//         }
//       }
//       .pl-#{$bp}-#{$size} {
//         @media (min-width: $bp-value) {
//           padding-left: $value;
//         }
//       }
//       .px-#{$bp}-#{$size} {
//         @media (min-width: $bp-value) {
//           padding-left: $value;
//           padding-right: $value;
//         }
//       }
//       .py-#{$bp}-#{$size} {
//         @media (min-width: $bp-value) {
//           padding-top: $value;
//           padding-bottom: $value;
//         }
//       }
//     }
//   }