@each $c in (333, 666, 999, f00) {
  @each $t, $v in (c:color, bg:background) {
    .#{$t}-#{$c} {
      #{$v}: #{'#'+$c};
    }
  }
}

@for $i from 1 through 30 {
  @each $p, $pv in (margin:m, padding:p) {
    .#{$pv}-#{$i} {
      #{$p}: #{$i}px;
    }
    .#{$pv}v-#{$i} {
      #{$p}-top: #{$i}px;
      #{$p}-bottom: #{$i}px;
    }
    .#{$pv}h-#{$i} {
      #{$p}-left: #{$i}px;
      #{$p}-right: #{$i}px;
    }

    @each $pos, $v in (left:l, right:r, top:t, bottom:b) {
      .#{$pv+$v}-#{$i} {
        #{$p}-#{$pos}: #{$i}px;
      }
    }
  }
}