Padding and margin helper created with stylus

padding-helper-non-abbrev

/*
 * This is a padding and margin helper used in many frameworks like `Vuetify`
 * except it supports responsive and is easily extendable and uses `em` instead
 * of pixels. (https://zellwk.com/blog/media-query-units/)
 *
 * .pr-2h = padding-right: 2.5rem
 * .my-xs-3.my-md-0 = margin top and bottom (y-axis) 3rem on all sizes up to medium
 *
 */

// Main variables that distinguish how much and what types being made
sizes = no, ('h', 0.5rem), ('1', 1rem), ('1h', 1.5rem), ('2', 2rem),
  ('2h', 2.5rem) ('3', 3rem) ('3h', 3.5rem) ('4', 4rem) ('4h', 4.5rem),
  ('5', 5rem)
directions = ('a', 'all'), ('l', 'left'), ('r', 'right'),
  ('x', 'horizontal'), ('t', 'top'), ('b', 'bottom'), ('y', 'vertical')

// This creates the padding and margin blocks if they're non-zero
spacingContentNonzero(type,direction,size)
  if direction[1] is horizontal
     {type}-left size[1]
     {type}-right size[1]
   else if direction[1] is vertical
     {type}-top size[1]
     {type}-bottom size[1]
   else if direction[1] is all
     {type} size[1]
   else
     {type}-{direction[1]} size[1]

// This creates the padding and margin blocks if they're zero
spacingContentZero(type,direction,size)
  if direction[1] is horizontal
    {type}-left 0
    {type}-right 0
  else if direction[1] is vertical
    {type}-top 0
    {type}-bottom 0
  else if direction[1] is all
    {type} 0
  else
    {type}-{direction[1]} 0

// This is the main generator function
spacing(type,direction,additionalTag='')
  for size in sizes
    if size is no
      .{split('',type)[0]}{split('',direction[0])[0]}{additionalTag}-0
        spacingContentZero(type,direction,size)
    else if additionalTag
      .{split('',type)[0]}{split('',direction[0])[0]}{additionalTag}-{size[0]}
        spacingContentNonzero(type,direction,size)
    else if no additionalTag
      .{split('',type)[0]}{split('',direction[0])[0]}-{size[0]}
        spacingContentNonzero(type,direction,size)

// this mixin calls the main generator function giving
// it all the parameters it needs including an additional tag
// for responsive requirements
generateSpacing(additionalTag='')
  for type in 'margin' 'padding'
    for direction in directions
      spacing(type,direction,additionalTag)

// optionally here we can also add for responsive like the following
// generateSpacing() - currently ignoring this as `Vuetify` contains base classes
@media only screen and (max-width 30em)
  generateSpacing(-xs)
@media only screen and (min-width 30em) //480px
  generateSpacing(-sm)
@media only screen and (min-width 48em) //768px
  generateSpacing(-md)
@media only screen and (min-width 62em) //992px
  generateSpacing(-lg)
@media only screen and (min-width 75em) //1200px
  generateSpacing(-xl)