_Mixins.styl

Padding and Margin

mgn(mt,mr,mb = mt,ml = mr)

  if mt == mb and mr == ml
    if mr == auto
      margin $let*mt*1em auto
      margin $let*mt*1rem auto

    else
      margin $let*mt*1em $gut*mr*1em
      margin $let*mt*1rem $gut*mr*1rem

  else if mt != mb and mr == ml
    if mr == auto
      margin $let*mt*1em auto $let*mb*1em
      margin $let*mt*1rem auto $let*mb*1em

    else
      margin $let*mt*1em $gut*mr*1em $let*mb*1em
      margin $let*mt*1rem $gut*mr*1rem $let*mb*1rem

  else
    margin $let*mt*1em $gut*mr*1em $let*mb*1em $gut*ml*1em
    margin $let*mt*1rem $gut*mr*1rem $let*mb*1rem $gut*ml*1rem


pad(pt,pr,pb = pt,pl = pr)

  if pb == pt and pr == pl
    padding $let*pt*1em $gut*pr*1em
    padding $let*pt*1rem $gut*pr*1rem

  else if pb != pt and pr == pl
    padding $let*pt*1em $gut*pr*1em $let*pb*1em
    padding $let*pt*1rem $gut*pr*1rem $let*pb*1rem

  else
    padding $let*pt*1em $gut*pr*1em $let*pb*1em $gut*pl*1em
    padding $let*pt*1rem $gut*pr*1rem $let*pb*1rem $gut*pl*1rem

Hook straight in to the type-led grid layout system.

Assume half- or whole-step multiples of vertical ($let) and horizontal ($gut) units.

Media queries

bp($condition)
  helper($condition)
    unless $media_cache[$condition]
      $media_cache[$condition] = ()
    push($media_cache[$condition], block)

  +helper($condition)
    {selector() + ''}
      {block}

$media_cache = {}
$media_aliases = {
  mN: 'screen and (min-width : 449px)'
  mM: 'screen and (min-width : 639px)'
  mT: 'screen and (min-width : 863px)'
  mD: 'screen and (min-width : 1199px)'
  D: 'screen and (max-width : 1200px)'
  T: 'screen and (max-width : 864px)'
  M: 'screen and (max-width : 640px)'
  N: 'screen and (max-width : 450px)'
  r: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
  p: 'only print'
}

dump_media_cache()
  for $media, $blocks in $media_cache
    $media = unquote($media_aliases[$media] || $media)
    @media $media
      for $block in $blocks
        {$block}

Nest bp() directly under the selector being made responsive. dump_media_cache() will ensure this ends up at the bottom of your compiled CSS, so as not to disrupt specificity.