@each $ds-name, $ds-ratio in $ds-spaces {
  .margin-#{$ds-name} {
    margin: $ds-ratio * $ds-space-unit;
  }

  .padding-#{$ds-name} {
    padding: $ds-ratio * $ds-space-unit;
  }

  @each $ds-position in ('top', 'left', 'right', 'bottom') {
    .margin-#{$ds-position}-#{$ds-name} {
      margin-#{$ds-position}: $ds-ratio * $ds-space-unit;
    }

    .padding-#{$ds-position}-#{$ds-name} {
      padding-#{$ds-position}: $ds-ratio * $ds-space-unit;
    }
  }
}
