Size Generators (margin, padding, font-size) #scss #stylus

generators.scss

// Generate class helpers for size properties such as margin, padding, font-size
// Usage :
// @include marginer(5, 60, 5)
// .mt5 will then add margin-top:5px to the element,
// and so on for each side, from 5px to 60px with a 5px step.

@mixin marginer($min, $max, $step) {
  .mt#{$min} {margin-top: $min*1px}
  .mb#{$min} {margin-bottom: $min*1px}
  .ml#{$min} {margin-left: $min*1px}
  .mr#{$min} {margin-right: $min*1px}
  @if $min < $max {
    @include marginer($min + $step, $max, $step);
  }
}

@mixin paddinger($min, $max, $step) {
  .pt#{$min} {padding-top: $min*1px}
  .pb#{$min} {padding-bottom: $min*1px}
  .pl#{$min} {padding-left: $min*1px}
  .pr#{$min} {padding-right: $min*1px}
  @if $min < $max {
    @include paddinger($min + $step, $max, $step);
  }
}

@mixin fontsizer($min, $max, $step) {
  .fs#{$min} {font-size: $min*1px}
  @if $min < $max {
    @include marginer($min + $step, $max, $step);
  }
}

generators.styl

// Generate class helpers for size properties such as margin, padding, font-size
// Usage :
// marginer(5, 60, 5)
// .mt5 will then add margin-top:5px to the element,
// and so on for each side, from 5px to 60px with a 5px step.

marginer(min, max, step)
  .mt{min}
    margin-top (min px)
  .mb{min}
    margin-bottom (min px)
  .ml{min}
    margin-left (min px)
  .mr{min}
    margin-right (min px)
  if min < max
    marginer(min + step, max, step)

paddinger(min, max, step)
  .pt{min}
    padding-top (min px)
  .pb{min}
    padding-bottom (min px)
  .pl{min}
    padding-left (min px)
  .pr{min}
    padding-right (min px)
  if min < max
    paddinger(min + step, max, step)

fontsizer(min, max, step)
  .fs{min}
    font-size (min px)
  if min < max