spaaaace.js

// spacing
// colors
// forms
// font size
// font weight

var scale = [0, 5, 10, 20, 35, 60, 100, 150]

var positions = {
  a: '',
  t: '-top',
  r: '-right',
  b: '-bottom',
  l: '-left',
  h: '',
  v: ''
}

var mediaqueries = {
  ns: 'min-width: 600px',
  md: 'min-width: 900px',
  lg: 'min-width: 1200px'
}

function spacingNamespace (opts) {
  opts = opts || {}

  var css = ''
  var type = opts.type
  var prefix = (opts.prefix || '') + type.charAt(0)
  var mediaquery = opts.mediaquery || null

  if (opts.prefix && opts.prefix.length) {
    css += `@media (${mediaquery}) {
    `
  }

  scale.forEach(function (n, i) {
    var keys = Object.keys(positions)
    
    keys.forEach(function (key) {
      if (key === 'a') {
        css += `
        .${prefix}${key}${i} { ${type}: ${scale[i]}px; }`
      }
      if (key === 'h') {
        css += `
        .${prefix}${key}${i} {
          ${type}-top: ${scale[i]}px;
          ${type}-bottom: ${scale[i]}px;
        }`
      } else if (key === 'v') {
        css += `
        .${prefix}${key}${i} {
           ${type}-right: ${scale[i]}px;
           ${type}-left: ${scale[i]}px;
        }`
      } else {
        css += `
        .${prefix}${key}${i} { ${type}${positions[key]}: ${scale[i]}px; }`
      }
    })
  })

  if (opts.prefix && opts.prefix.length) {
    css += `
    }
    `
  }

  return css
}

function spacing (type) {
  var mq = Object.keys(mediaqueries)
  var css = spacingNamespace({ type: type })

  css += mq.map(function (key) {
    return spacingNamespace({
      type: type,
      prefix: key + '-',
      mediaquery: mediaqueries[key]
    })
  }).join('\n')

  return css
}

console.log(spacing('padding') + '\n' + spacing('margin'))