Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

// What / Why?
// 1. Allow people to use constants for box-values. for example 'single' 'half', 
// 'third' etc. 
// 2. Link these values to vertical and horizontal rhythm 
// properties (to allow adjustments for optical distortion)
// 3. Make rhythm units breakpoint-specific – Push all box-model property setting 
// through an API so that these constants can be adjusted automatically at 
// breakpoints, for example `single` will always be a single rhythm unit, but at 
// default, that unit might be 10px, and at a $medium breakpoint, that might be 14px.

// Engine
// -------------------------------------------------------------------------

// Process all value lists to four values to make processing easy.
@function core-process-to-four-values($values) {
  $length: length($values);
  // Convert all values to 4 values
  @if $length < 4 {
    @if length($values) == 3 {
      // (T,L+R,B) We need to add the 2nd prop again as the last prop
      $values: append($values, nth($values, 2));
    } @else if $length == 2 {
      // (T+B, L+R) We need to duplicate
      $values: join($values, $values);
    } @else {
      // (T+R+B+L) We need to duplicate 4 times
      $values: append( append(append($values, nth($values, 1)), nth($values, 1)), nth($values, 1));
    }
  } 
  @return $values;
}

// Process value if it isn't already a valid number
@function core-process-value($value, $orientation) {
  @if core-should-parse-value($value) {
    $value: core-parse-value-filter($value);
    $value: core-resolve-value-filter($value, $orientation);
  }
  @return $value;
}

@function core-process-values($values) {
  $values: core-process-to-four-values($values);
  $processed-values: ();
  $orientation: null;
  @for $i from 1 through length($values) {
    $value: nth($values, $i);
    @if even($i) {
      $orientation: horizontal;
    } @else {
      $orientation: vertical;
    }
    @if core-should-parse-value($value) {
      $value: core-parse-value-filter($value);
      $value: core-resolve-value-filter($value, $orientation);
    }
    $processed-values: append($processed-values, $value);
  }
  @return $processed-values;
}

// 1. Check if the value maps to one of our keywords and if so, swap out the value
// This is just a hook to be overridden. By default we just pass back the value
@function core-parse-value-filter($value){
  @return $value;
}

// 2. Check if the resolved value is unitless. If so multiply the value by the rhythm
// unit we are using
// This is just a hook to be overridden. By default we just pass back the value
@function core-resolve-value-filter($value, $orientation){
  @return $value;
}

// Mixins
// -------------------------------------------------------------------------

// Pass in a map
@mixin box($map) {
  @each $key, $value in $map {
    #{$key}: #{core-process-values($value)};
  }
}

// Margin

@mixin margin($value) {
  $value: core-process-values($value);
  margin: #{$value};
}

@mixin margin-top($value) {
  $value: core-process-value($value, vertical);
  margin-top: #{$value};
}

@mixin margin-right($value) {
  $value: core-process-value($value, horizontal);
  margin-right: #{$value};
}

@mixin margin-bottom($value) {
  $value: core-process-value($value, vertical);
  margin-bottom: #{$value};
}

@mixin margin-left($value) {
  $value: core-process-value($value, horizontal);
  margin-left: #{$value};
}

// Padding

@mixin padding($value) {
  $value: core-process-values($value);
  padding: #{$value};
}

@mixin padding-top($value) {
  $value: core-process-value($value, vertical);
  padding-top: #{$value};
}

@mixin padding-right($value) {
  $value: core-process-value($value, horizontal);
  padding-right: #{$value};
}

@mixin padding-bottom($value) {
  $value: core-process-value($value, vertical);
  padding-bottom: #{$value};
}

@mixin padding-left($value) {
  $value: core-process-value($value, horizontal);
  padding-left: #{$value};
}

// Border

@mixin border($value) {
  $value: core-process-values($value);
  border: #{$value};
}

@mixin border-top($value) {
  $value: core-process-value($value, vertical);
  border-top: #{$value};
}

@mixin border-right($value) {
  $value: core-process-value($value, horizontal);
  border-right: #{$value};
}

@mixin border-bottom($value) {
  $value: core-process-value($value, vertical);
  border-bottom: #{$value};
}

@mixin border-left($value) {
  $value: core-process-value($value, horizontal);
  border-left: #{$value};
}


// UTIL
// -------------------------------------------------------------------------

$core-valid-unitless-values: auto initial inherit 0;

// Check if value is even
@function even($number) {
  @return $number % 2 == 0;
}

// Does the value need to be parsed ?
@function core-should-parse-value($value){
  @return not (core-is-valid-unitless($value) or core-is-number_with_unit($value));
}

@function core-is-valid-unitless($value) {
  @return not not index($core-valid-unitless-values, $value);
}

@function core-is-number_with_unit($value) {
  @return (type-of($value) == number and not unitless($value));
}

// Test Defaults
// -------------------------------------------------------------------------

/* Defaults */

.Default-padding-top {
  @include padding-top(10px);
}

.Default-padding-right {
  @include padding-right(10px);
}

// APP
// -------------------------------------------------------------------------

$rhythm-units-map: (
  single: 1,
  double: 2,
  triple: 3,
  quadruple: 4,
  half: 0.5,
  third: 0.33333333333,
  quarter: 0.25
);

$rhythm-map: (
  vertical: 12px,
  horizontal: 16px
);

// If the value isn't a united number or a known keyword, look up the keyword 
// in the $rhythm-units-map (which will resolve to a unitless number)
@function core-parse-value-filter($key){
  @if map-has-key($rhythm-units-map, $key) {
    @return map-get($rhythm-units-map, $key);
  } @else {
    @error "Unsupported key #{$key}";
  }
}

// Multiply the unitless number with the appropriate rhythm-unit
// in the $rhythm-units-map (depending on vertical or horizontal orientation)
@function core-resolve-value-filter($value, $orientation){
  @return map-get($rhythm-map, $orientation) * $value;
}

// Test Custom
// -------------------------------------------------------------------------

/* Custom */

.box {
  @include box(
    (
      margin: single 10px half,
      padding: half,
      border: 1px 10rem
    )
  );
}

.box-with-specific {
  @include box(
    (
      margin: single,
      padding: half,
      border: 1px
    )
  );
}

.padding-top {
  @include padding-top(auto);
}

.padding-right {
  @include padding-right(single);
}

.padding-one-arg {
  @include padding(single);
}

.padding-two-args {
  @include padding(single double);
}

.padding-three-args {
  @include padding(single double auto);
}

.padding-four-args {
  @include padding(single double triple half);
}

SassMeister-output.css

/* Defaults */
.Default-padding-top {
  padding-top: 10px;
}

.Default-padding-right {
  padding-right: 10px;
}

/* Custom */
.box {
  margin: 12px 10px 6px 10px;
  padding: 6px 8px 6px 8px;
  border: 1px 10rem 1px 10rem;
}

.box-with-specific {
  margin: 12px 16px 12px 16px;
  padding: 6px 8px 6px 8px;
  border: 1px 1px 1px 1px;
}

.padding-top {
  padding-top: auto;
}

.padding-right {
  padding-right: 16px;
}

.padding-one-arg {
  padding: 12px 16px 12px 16px;
}

.padding-two-args {
  padding: 12px 32px 12px 32px;
}

.padding-three-args {
  padding: 12px 32px auto 32px;
}

.padding-four-args {
  padding: 12px 32px 36px 8px;
}