_spacing.scss

$spacer: 1rem;
$spacings: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
) !default;

$media-min-sm: 576px;
$media-min-md: 768px;
$media-min-lg: 992px;
$media-min-xl: 1200px;

$media-max-sm: 540px;
$media-max-md: 720px;
$media-max-lg: 960px;
$media-max-xl: 1140px;

$media-widths: (
  "sm": $media-min-sm,
  "md": $media-min-md,
  "lg": $media-min-lg,
  "xl": $media-min-xl,
) !default;

@each $id, $value in $spacings {
  .sd-p-#{$id} {
    padding: $value !important;
  }

  .sd-pt-#{$id},
  .sd-py-#{$id} {
    padding-top: $value !important;
  }

  .sd-pr-#{$id},
  .sd-px-#{$id} {
    padding-right: $value !important;
  }

  .sd-pb-#{$id},
  .sd-py-#{$id} {
    padding-bottom: $value !important;
  }

  .sd-pl-#{$id},
  .sd-px-#{$id} {
    padding-left: $value !important;
  }
}

.sd-m-auto {
  margin: auto !important;
}

.sd-mt-auto,
.sd-my-auto {
  margin-top: auto !important;
}

.sd-mr-auto,
.sd-mx-auto {
  margin-right: auto !important;
}

.sd-mb-auto,
.sd-my-auto {
  margin-bottom: auto !important;
}

.sd-ml-auto,
.sd-mx-auto {
  margin-left: auto !important;
}

@each $id, $value in $spacings {
  .sd-m-#{$id} {
    margin: $value !important;
  }

  .sd-mt-#{$id},
  .sd-my-#{$id} {
    margin-top: $value !important;
  }

  .sd-mr-#{$id},
  .sd-mx-#{$id} {
    margin-right: $value !important;
  }

  .sd-mb-#{$id},
  .sd-my-#{$id} {
    margin-bottom: $value !important;
  }

  .sd-ml-#{$id},
  .sd-mx-#{$id} {
    margin-left: $value !important;
  }
}