Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

=respond-to($val, $query: min-width, $media: screen)
  @media #{$media} and ($query: $val)
    @content

$g-s: 400px
$g-m: 800px
$g-l: 1200px

$g-breakpoints: (s: $g-s, m: $g-m, l: $g-l)

$b-space: 1.25em
$b-space-xs: $b-space / 4
$b-space-s: $b-space / 2
$b-space-l: $b-space * 2
$b-space-xl: $b-space * 4

$b-space-map: (f: 0, xs: $b-space-xs, s: $b-space-s, m: $b-space, l: $b-space-l, xl: $b-space-xl)

// ----- Variables ----- //

$tool-isImportant: true
$tool-importance: if($tool-isImportant, !important, null)

// Margin

$tool-margin: ()
$tool-marginBottom: (b: (f xs s m l xl), m: (f m l))
$tool-marginLeft: (b: (m), m: (l))
$tool-marginRight: ()
$tool-marginTop: (b: (f m l))

// Padding

$tool-padding: (b: (m l))
$tool-paddingBottom: (b: (m))
$tool-paddingLeft: ()
$tool-paddingRight: ()
$tool-paddingTop: (b: (m l))

// Position

$tool-top: (b: (xs s m), s: (l))
$tool-top-negative: (b: (xs s m), m: (l))

// ----- Setup ----- //

=tool-setup-spacing-property($property, $name, $map, $isPositive: true)
  $sign: if($isPositive, 1, -1)
  $suffix: if($isPositive, null, 'n')

  @each $list in $map
    $breakpoint: nth($list, 1)
    $sizes: nth($list, 2)

    @if $breakpoint == 'b'
      @each $size in $sizes
        .#{$name}#{$size}#{$suffix}
          #{$property}: ($sign * map-get($b-space-map, $size)) $tool-importance

    @else
      +respond-to(map-get($g-breakpoints, $breakpoint))
        @each $size in $sizes
          .#{$name}#{$size}#{$suffix}--#{$breakpoint}
            #{$property}: ($sign * map-get($b-space-map, $size)) $tool-importance

// ----- Build ----- //

//
  +tool-setup-spacing-property('margin', 'ma', $tool-margin)
  +tool-setup-spacing-property('margin-bottom', 'mb', $tool-marginBottom)
  +tool-setup-spacing-property('margin-left', 'ml', $tool-marginLeft)
  +tool-setup-spacing-property('margin-right', 'mr', $tool-marginRight)
  +tool-setup-spacing-property('margin-top', 'mt', $tool-marginTop)

  +tool-setup-spacing-property('padding', 'pa', $tool-padding)
  +tool-setup-spacing-property('padding-bottom', 'pb', $tool-paddingBottom)
  +tool-setup-spacing-property('padding-left', 'pl', $tool-paddingLeft)
  +tool-setup-spacing-property('padding-right', 'pr', $tool-paddingRight)
  +tool-setup-spacing-property('padding-top', 'pt', $tool-paddingTop)

+tool-setup-spacing-property('top', 'pot', $tool-top)
+tool-setup-spacing-property('top', 'pot', $tool-top-negative, false)
  
  
  

SassMeister-output.css

.potxs {
  top: 0.3125em !important;
}

.pots {
  top: 0.625em !important;
}

.potm {
  top: 1.25em !important;
}

@media screen and (min-width: 400px) {
  .potl--s {
    top: 2.5em !important;
  }
}
.potxsn {
  top: -0.3125em !important;
}

.potsn {
  top: -0.625em !important;
}

.potmn {
  top: -1.25em !important;
}

@media screen and (min-width: 800px) {
  .potln--m {
    top: -2.5em !important;
  }
}