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

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

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

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

@for $h from 1 through 6 {
  h#{$h} {
    margin-top: space(normal);
    &:first-child {
      margin-top: 0;
    }
  }
}