padding margins helpers

helpers.scss

// padding/margins helpers
$sizes: (xs: 0.5rem, sm: 1rem, md: 1.5rem, lg: 2rem, xl: 2.5rem);
$properties: ('top', 'right', 'left', 'bottom');

@each $name, $value in $sizes {
  @each $prop in $properties {
    .margin-#{$prop}-#{$name} {
      margin-#{$prop}: $value;
    }

    .padding-#{$prop}-#{$name} {
      padding-#{$prop}: $value;
    }
  }
}