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)
// .mt-5 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, unit = em)
  .mt-{min}
    margin-top s('%s%s', min, unit)
  .mb-{min}
    margin-bottom s('%s%s', min, unit)
  .ml-{min}
    margin-left s('%s%s', min, unit)
  .mr-{min}
    margin-right s('%s%s', min, unit)
  if min < max
    marginer(min + step, max, step, unit)

paddinger(min, max, step, unit = em)
  .pt-{min}
    padding-top s('%s%s', min, unit)
  .pb-{min}
    padding-bottom s('%s%s', min, unit)
  .pl-{min}
    padding-left s('%s%s', min, unit)
  .pr-{min}
    padding-right s('%s%s', min, unit)
  if min < max
    paddinger(min + step, max, step, unit)

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