Generated by SassMeister.com.

SassMeister-input.scss

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

/*! Box v0.0.10 – 12.10.2014 */

/**
 * @author Pedr Browne
 * @group Support
 * @access private
 **/

/**
 * Possible orientations for each box property
 */
$box-orientations: horizontal vertical;

/**
 * Values without a unit that are accepted without being parsed
 */
$box-valid-unitless-values: auto initial inherit 0;

/**
 * Valid properties that accept multiple values
 */
$box-valid-multiple-properties: margin padding border;

/**
 * Valid properties that accept a single value
 */
$box-valid-single-properties: margin-top
                              margin-right
                              margin-bottom
                              margin-left
                              padding-top
                              padding-right
                              padding-bottom
                              padding-left
                              border-top
                              border-right
                              border-bottom
                              border-left;

/**
 * All valid properties
 */
$box-valid-properties: join($box-valid-multiple-properties, $box-valid-single-properties);

/**
 * Error thrown when too many arguments are supplied to a property
 */
$box-argument-count-error: "Argument Count Error";

/**
 * Error thrown when a property is unsupported
 */
$box-invalid-property-error: "Invalid Property Error";

/**
 * Error thrown when a value is invalid
 */
$box-invalid-value-error: "Invalid Value Error";

/**
 * Process a property and value, discovering if the property is supported and whether it accepts
 * singular or multiple values.
 *
 * @param {String} $property
 *  The box property
 *
 * @param {String} $value
 *  The box property value
 *
 * @return {String}
 *  The processed value
 *
 * @throws $box-argument-count-error
 * @throws $box-invalid-property-error
 */
@function box-process-arbitrary-value($property, $value) {
  @if box-is-valid-property($property) {
    @if box-is-single-property($property) {
      @if length($value) == 1 {
        $orientation: box-orientation-of-property($property);
        @return box-process-single-value($value, $orientation);
      } @else {
        @return box-throw-error($box-argument-count-error, "#{$property} only supports a single value, but value was `#{$value}`");
      }
    } @else {
      @return box-process-multiple-values($value);
    }
  } @else {
    @return box-throw-error($box-invalid-property-error, "#{$property} is not a supported value");
  }
}

/**
 * Check if the $value is already valid and process it if not
 *
 * @param {String} $value
 *   The value to process
 *
  * @param {String} $value
 *   The orientation of that value (horizontal | vertical)
 */
@function box-process-single-value($value, $orientation) {
  @if not box-is-valid-value($value) {
    // Process if it isn't already a valid value
    $value: box-parse-value-filter($value, $orientation);
  }
  @return $value;
}

/**
 * Check if multiple $values are already valid and process any that are not.
 *
 * @param {String} $values
 *  The values to process
 *
 * @return {Map}
 *  The processed values
 */
@function box-process-multiple-values($values) {
  $values: box-process-to-four-values($values);
  $processed-values: ();
  $orientation: null;
  @for $i from 1 through length($values) {
    $value: nth($values, $i);
    @if is-even($i) {
      $orientation: horizontal;
    } @else {
      $orientation: vertical;
    }
    @if not box-is-valid-value($value) {
      $value: box-parse-value-filter($value, $orientation);
    }
    $processed-values: append($processed-values, $value);
  }
  @return $processed-values;
}

/**
 * Expand values to 4 separate values to streamline processing.
 *
 * @param {String} $values
 *  The values to process
 *
 * @return {String}
 *  The expanded values
 */
@function box-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;
}

/**
 * Is the supplied property a property that is supported?
 *
 * @param {String} $property
 *  The property
 *
 * @return {Bool}
 *  Is the property valid?
 */
@function box-is-valid-property($property) {
  @return not not index($box-valid-properties, $property);
}

/**
 * Does the supplied property take a single value?
 *
 * @param {String} $property
 *  The property
 *
 * @return {Bool}
 *  Does the property accept a single value?
 */
@function box-is-single-property($value) {
  @return not not index($box-valid-single-properties, $value);
}

/**
 * Is the property related to the horizontal or vertical axis?
 *
 * @param {String} $property
 *  The property
 *
 * @return {String}
 *  The orientation of the property (horizontal | vertical)
 */
@function box-orientation-of-property($property) {
  $direction: str-slice($property, str-index($property, '-') + 1);
  @if not not index(left right, $direction) {
    @return horizontal;
  } @else {
    @return vertical;
  }
}

// Common
// TODO: Extract to Glue
// -------------------------------------------------------------------------------------------------

/**
 * Error thrown when an item is followed by an invalid value
 */

$box-invalid-value-error: "Invalid Value Error";

// These items are used in test only
$box-last-error: null;
$box-under-test: false;
$box-error-thrown: false;

/**
 * By default, this function will throw a Sass error, but allows errors to be stopped during testing,
 * with the error saved to `$box-last-error` instead so tests can check it was thrown.
 *
 * @param {String} $error
 *  The name of the error
 *
 * @param {String} $message
 *  The error message
 *
 * @returns {Map}
 *  A map of offsets to be rendered as CSS properties
 */
@function box-throw-error($error, $message) {
  @if $box-under-test {
    @if not $box-error-thrown {
      $box-error-thrown: true !global;
      $box-last-error: $error !global;
    }
  } @else {
    @error "#{$error} #{$message}";
  }
  @return null;
}

/**
 * Overridable hook to handle unrecognised values. By default it will throw an error.
 *
 * @param {String} $value
 *  An unrecognised value
 *
 * @param {orientation}
 *  The orientation of the value's keyword (horizontal | vertical)
 *
 * @returns {null}
 *
 * @throws $box-unsupported-value-error
 */
@function box-parse-value-filter($value, $orientation) {
  @return box-throw-error($box-invalid-value-error, "Invalid value #{$value}");
}

/**
 * Is this valid already valid or does it need to be parsed?
 *
 * @param {String} $value
 *  The value to be checked
 *
 * @returns {Bool}
 *  Does the value need to be pa
 */
@function box-is-valid-value($value) {
  @return box-is-number-with-unit($value)
       or box-is-valid-unitless($value)
       or box-is-calc($value);
}

/**
 * Was the value a valid one; either united, supported unitless or calc
 *
 * @param {String} $value
 *  The value to be checked
 *
 * @returns {Bool}
 *  Was the value valid?
 */
@function box-is-valid-value($value) {
  @return box-is-number-with-unit($value)
       or box-is-valid-unitless($value)
       or box-is-calc($value);
}

/**
 * Determine if the value is a valid number with a unit
 *
 * @param {String} $value
 *  Value to be checked
 *
 * @returns {Bool}
 *  Was the value number with a unit?
 *
 */
@function box-is-number-with-unit($value) {
  @return (type-of($value) == number and not unitless($value));
}

/**
 * Determine if the value is a valid unitless value.
 *
 * @param {String} $value
 *  Value to be checked
 *
 * @returns {Bool}
 *  Was the value unitless?
 */
@function box-is-valid-unitless($value) {
  @return not not index($box-valid-unitless-values, $value);
}

/**
 * Determine if the value is a `calc()` expression.
 *
 * @param {String} $value
 *  Value to be checked
 *
 * @returns {Bool}
 *  Was the value a `calc` expression?
 */
@function box-is-calc($value) {
 @return str-slice($value + "", 1, 4) == calc;
}

/**
 * Check a number to see if it is even.
 *
 * @param {Number} $value
 *  The value to check.
 *
 * @returns {Bool}
 *  Is the number even?
 */
@function is-even($number) {
  @return $number % 2 == 0;
}

/**
 * @author Pedr Browne
 * @group API
 * @access public
 **/

/**
 * Render the supplied box-properties.
 *
 * @param {Map} $map
 *  Map of box properties. The following properties / keys are supported:
 *
 *  - margin
 *  - margin-top
 *  - margin-right
 *  - margin-bottom
 *  - margin-left
 *  - border
 *  - border-top
 *  - border-right
 *  - border-bottom
 *  - border-left
 *  - padding
 *  - padding-top
 *  - padding-right
 *  - padding-bottom
 *  - padding-left
 *
 * @output
 *  The supplied properties.
 *
 * @example scss - Usage
 *  .element {
 *    @include box(
 *      (
 *        margin: 5px,
 *        padding: 20px,
 *        padding-left: 2px,
 *        border: 2px 3px 2px
 *      )
 *    );
 *  }
 *
 * @example css - CSS Output
 *  .element {
 *    margin: 5px;
 *    padding: 20px;
 *    padding-left: 2px;
 *    border: 2px 3px 2px;
 *  }
 */
@mixin box($map) {
  @each $key, $value in $map {
    #{$key}: #{box-process-arbitrary-value($key, $value)};
  }
}

/**
 * Render the supplied margin.
 *
 * @param {String} $value
 *  The `margin` value.
 *
 * @output
 *  The `margin` property and value.
 */
@mixin margin($value) {
  $value: box-process-multiple-values($value);
  margin: #{$value};
}

/**
 * Render the supplied margin-top.
 *
 * @param {String} $value
 *  The `margin-top` value.
 *
 * @output
 *  The `margin-top` property and value.
 */
@mixin margin-top($value) {
  $value: box-process-single-value($value, vertical);
  margin-top: #{$value};
}

/**
 * Render the supplied margin-right.
 *
 * @param {String} $value
 *  The `margin-right` value.
 *
 * @output
 *  The `margin-right` property and value.
 */
@mixin margin-right($value) {
  $value: box-process-single-value($value, horizontal);
  margin-right: #{$value};
}

/**
 * Render the supplied margin-bottom.
 *
 * @param {String} $value
 *  The `margin-bottom` value.
 *
 * @output
 *  The `margin-bottom` property and value.
 */
@mixin margin-bottom($value) {
  $value: box-process-single-value($value, vertical);
  margin-bottom: #{$value};
}

/**
 * Render the supplied margin-left.
 *
 * @param {String} $value
 *  The `margin-left` value.
 *
 * @output
 *  The `margin-left` property and value.
 */
@mixin margin-left($value) {
  $value: box-process-single-value($value, horizontal);
  margin-left: #{$value};
}

/**
 * Render the supplied padding.
 *
 * @param {String} $value
 *  The `padding` value.
 *
 * @output
 *  The `padding` property and value.
 */
@mixin padding($value) {
  $value: box-process-multiple-values($value);
  padding: #{$value};
}

/*
 * Render the supplied padding-top.
 *
 * @param {String} $value
 *  The `padding-top` value.
 *
 * @output
 *  The `padding-top` property and value.
 */

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

/**
 * Render the supplied padding-right.
 *
 * @param {String} $value
 *  The `padding-right` value.
 *
 * @output
 *  The `padding-right` property and value.
 */
@mixin padding-right($value) {
  $value: box-process-single-value($value, horizontal);
  padding-right: #{$value};
}

/**
 * Render the supplied padding-bottom.
 *
 * @param {String} $value
 *  The `padding-bottom` value.
 *
 * @output
 *  The `padding-bottom` property and value.
 */
@mixin padding-bottom($value) {
  $value: box-process-single-value($value, vertical);
  padding-bottom: #{$value};
}

/**
 * Render the supplied padding-left.
 *
 * @param {String} $value
 *  The `padding-left` value.
 *
 * @output
 *  The `padding-left` property and value.
 */
@mixin padding-left($value) {
  $value: box-process-single-value($value, horizontal);
  padding-left: #{$value};
}

/**
 * Render the supplied border.
 *
 * @param {String} $value
 *  The `border` value.
 *
 * @output
 *  The `border` property and value.
 */
@mixin border($value) {
  $value: box-process-multiple-values($value);
  border: #{$value};
}

/**
 * Render the supplied border-top.
 *
 * @param {String} $value
 *  The `border-top` value.
 *
 * @output
 *  The `border-top` property and value.
 */
@mixin border-top($value) {
  $value: box-process-single-value($value, vertical);
  border-top: #{$value};
}

/**
 * Render the supplied border-right.
 *
 * @param {String} $value
 *  The `border-right` value.
 *
 * @output
 *  The `border-right` property and value.
 */
@mixin border-right($value) {
  $value: box-process-single-value($value, horizontal);
  border-right: #{$value};
}

/**
 * Render the supplied border-bottom.
 *
 * @param {String} $value
 *  The `border-bottom` value.
 *
 * @output
 *  The `border-bottom` property and value.
 */
@mixin border-bottom($value) {
  $value: box-process-single-value($value, vertical);
  border-bottom: #{$value};
}

/**
 * Render the supplied border-left.
 *
 * @param {String} $value
 *  The `border-left` value.
 *
 * @output
 *  The `border-left` property and value.
 */
@mixin border-left($value) {
  $value: box-process-single-value($value, horizontal);
  border-left: #{$value};
}

// Examples

.Example-box {
  @include box(
    (
      margin: 5px,
      padding: 20px,
      padding-left: 2px,
      border: 2px 3px 2px
    )
  );
}

SassMeister-output.css

@charset "UTF-8";
/*! Box v0.0.10 – 12.10.2014 */
/**
 * @author Pedr Browne
 * @group Support
 * @access private
 **/
/**
 * Possible orientations for each box property
 */
/**
 * Values without a unit that are accepted without being parsed
 */
/**
 * Valid properties that accept multiple values
 */
/**
 * Valid properties that accept a single value
 */
/**
 * All valid properties
 */
/**
 * Error thrown when too many arguments are supplied to a property
 */
/**
 * Error thrown when a property is unsupported
 */
/**
 * Error thrown when a value is invalid
 */
/**
 * Process a property and value, discovering if the property is supported and whether it accepts
 * singular or multiple values.
 *
 * @param {String} $property
 *  The box property
 *
 * @param {String} $value
 *  The box property value
 *
 * @return {String}
 *  The processed value
 *
 * @throws $box-argument-count-error
 * @throws $box-invalid-property-error
 */
/**
 * Check if the $value is already valid and process it if not
 *
 * @param {String} $value
 *   The value to process
 *
  * @param {String} $value
 *   The orientation of that value (horizontal | vertical)
 */
/**
 * Check if multiple $values are already valid and process any that are not.
 *
 * @param {String} $values
 *  The values to process
 *
 * @return {Map}
 *  The processed values
 */
/**
 * Expand values to 4 separate values to streamline processing.
 *
 * @param {String} $values
 *  The values to process
 *
 * @return {String}
 *  The expanded values
 */
/**
 * Is the supplied property a property that is supported?
 *
 * @param {String} $property
 *  The property
 *
 * @return {Bool}
 *  Is the property valid?
 */
/**
 * Does the supplied property take a single value?
 *
 * @param {String} $property
 *  The property
 *
 * @return {Bool}
 *  Does the property accept a single value?
 */
/**
 * Is the property related to the horizontal or vertical axis?
 *
 * @param {String} $property
 *  The property
 *
 * @return {String}
 *  The orientation of the property (horizontal | vertical)
 */
/**
 * Error thrown when an item is followed by an invalid value
 */
/**
 * By default, this function will throw a Sass error, but allows errors to be stopped during testing,
 * with the error saved to `$box-last-error` instead so tests can check it was thrown.
 *
 * @param {String} $error
 *  The name of the error
 *
 * @param {String} $message
 *  The error message
 *
 * @returns {Map}
 *  A map of offsets to be rendered as CSS properties
 */
/**
 * Overridable hook to handle unrecognised values. By default it will throw an error.
 *
 * @param {String} $value
 *  An unrecognised value
 *
 * @param {orientation}
 *  The orientation of the value's keyword (horizontal | vertical)
 *
 * @returns {null}
 *
 * @throws $box-unsupported-value-error
 */
/**
 * Is this valid already valid or does it need to be parsed?
 *
 * @param {String} $value
 *  The value to be checked
 *
 * @returns {Bool}
 *  Does the value need to be pa
 */
/**
 * Was the value a valid one; either united, supported unitless or calc
 *
 * @param {String} $value
 *  The value to be checked
 *
 * @returns {Bool}
 *  Was the value valid?
 */
/**
 * Determine if the value is a valid number with a unit
 *
 * @param {String} $value
 *  Value to be checked
 *
 * @returns {Bool}
 *  Was the value number with a unit?
 *
 */
/**
 * Determine if the value is a valid unitless value.
 *
 * @param {String} $value
 *  Value to be checked
 *
 * @returns {Bool}
 *  Was the value unitless?
 */
/**
 * Determine if the value is a `calc()` expression.
 *
 * @param {String} $value
 *  Value to be checked
 *
 * @returns {Bool}
 *  Was the value a `calc` expression?
 */
/**
 * Check a number to see if it is even.
 *
 * @param {Number} $value
 *  The value to check.
 *
 * @returns {Bool}
 *  Is the number even?
 */
/**
 * @author Pedr Browne
 * @group API
 * @access public
 **/
/**
 * Render the supplied box-properties.
 *
 * @param {Map} $map
 *  Map of box properties. The following properties / keys are supported:
 *
 *  - margin
 *  - margin-top
 *  - margin-right
 *  - margin-bottom
 *  - margin-left
 *  - border
 *  - border-top
 *  - border-right
 *  - border-bottom
 *  - border-left
 *  - padding
 *  - padding-top
 *  - padding-right
 *  - padding-bottom
 *  - padding-left
 *
 * @output
 *  The supplied properties.
 *
 * @example scss - Usage
 *  .element {
 *    @include box(
 *      (
 *        margin: 5px,
 *        padding: 20px,
 *        padding-left: 2px,
 *        border: 2px 3px 2px
 *      )
 *    );
 *  }
 *
 * @example css - CSS Output
 *  .element {
 *    margin: 5px;
 *    padding: 20px;
 *    padding-left: 2px;
 *    border: 2px 3px 2px;
 *  }
 */
/**
 * Render the supplied margin.
 *
 * @param {String} $value
 *  The `margin` value.
 *
 * @output
 *  The `margin` property and value.
 */
/**
 * Render the supplied margin-top.
 *
 * @param {String} $value
 *  The `margin-top` value.
 *
 * @output
 *  The `margin-top` property and value.
 */
/**
 * Render the supplied margin-right.
 *
 * @param {String} $value
 *  The `margin-right` value.
 *
 * @output
 *  The `margin-right` property and value.
 */
/**
 * Render the supplied margin-bottom.
 *
 * @param {String} $value
 *  The `margin-bottom` value.
 *
 * @output
 *  The `margin-bottom` property and value.
 */
/**
 * Render the supplied margin-left.
 *
 * @param {String} $value
 *  The `margin-left` value.
 *
 * @output
 *  The `margin-left` property and value.
 */
/**
 * Render the supplied padding.
 *
 * @param {String} $value
 *  The `padding` value.
 *
 * @output
 *  The `padding` property and value.
 */
/*
 * Render the supplied padding-top.
 *
 * @param {String} $value
 *  The `padding-top` value.
 *
 * @output
 *  The `padding-top` property and value.
 */
/**
 * Render the supplied padding-right.
 *
 * @param {String} $value
 *  The `padding-right` value.
 *
 * @output
 *  The `padding-right` property and value.
 */
/**
 * Render the supplied padding-bottom.
 *
 * @param {String} $value
 *  The `padding-bottom` value.
 *
 * @output
 *  The `padding-bottom` property and value.
 */
/**
 * Render the supplied padding-left.
 *
 * @param {String} $value
 *  The `padding-left` value.
 *
 * @output
 *  The `padding-left` property and value.
 */
/**
 * Render the supplied border.
 *
 * @param {String} $value
 *  The `border` value.
 *
 * @output
 *  The `border` property and value.
 */
/**
 * Render the supplied border-top.
 *
 * @param {String} $value
 *  The `border-top` value.
 *
 * @output
 *  The `border-top` property and value.
 */
/**
 * Render the supplied border-right.
 *
 * @param {String} $value
 *  The `border-right` value.
 *
 * @output
 *  The `border-right` property and value.
 */
/**
 * Render the supplied border-bottom.
 *
 * @param {String} $value
 *  The `border-bottom` value.
 *
 * @output
 *  The `border-bottom` property and value.
 */
/**
 * Render the supplied border-left.
 *
 * @param {String} $value
 *  The `border-left` value.
 *
 * @output
 *  The `border-left` property and value.
 */
.Example-box {
  margin: 5px 5px 5px 5px;
  padding: 20px 20px 20px 20px;
  padding-left: 2px;
  border: 2px 3px 2px 3px;
}