Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

$spacings: (
  small: rem(12),
  base: rem(24),
  medium: rem(32),
  large: rem(48),
  xlarge: rem(72),
  xxlarge: rem(96),
  xxxlarge: rem(144),
  xxxxlarge: rem(216),
  xxxxxlarge: rem(288)
);



@mixin space($args) {
  $_directions: top right bottom left;
  $_applications: padding margin;
  $application: false !default;
  $direction: false !default;
  $keys: map-keys($spacings);
  $amount: 0;

  @each $_dir in $_directions {
    $i: index($args, $_dir);
    @if $i { $direction: $_dir }
  }

  @each $_app in $_applications {
    $i: index($args, $_app);
    @if $i { $application: $_app }
  }
  
  @each $key in $keys {
    $i: index($args, $key);
    $value: map-get($spacings, $key);
    @if $i { $amount: $value; }
  }

  @if $amount != 0
  and $application != false
  and $direction != false {
    #{$application}-#{$direction}: $amount;
  } @else {
    @warn "Uh oh. The key #{$amount} wasn't found in map $spacings";
  }
}

.capsule-simple__view-btn {
  margin-top: rem(32);
  
  // Invalid spacings don't work
  @include space(top padding cheese);
  
  // valid ones do
  @include space(top padding small);
  @include space(top margin large);
  
  // in any order
  @include space(margin large bottom);
}

SassMeister-output.css

.capsule-simple__view-btn {
  margin-top: rem(32);
  padding-top: rem(12);
  margin-top: rem(48);
  margin-bottom: rem(48); }