Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// ----

@import "breakpoint";

// Breakpoints
// -----------------------------------------------------------------------------

$breakpoints: (
  medium-up: 500px,
  large-up: 1000px,
  xlarge-up: 1400px
);

@function get-breakpoint($name){
 @return map-get($breakpoints, $name); 
}

// Box Mixins
// -----------------------------------------------------------------------------

$block-property-names: margin margin-top margin-bottom margin-left margin-right padding padding-top padding-bottom padding-left padding-right border border-top border-bottom border-left border-right;

@mixin box($map){
  @each $property in $block-property-names {
    @if map-has-key($map, $property) {
      #{$property}: map-get($map, $property);
    }
  }
}

@mixin responsive-box($map){
  
  $defaults: (
  );
  
  // Handle default properties
  @each $property in $block-property-names {
    @if map-has-key($map, $property) {
      $defaults: map-merge($defaults, ($property: map-get($map, $property)));
      faux-#{$property}: map-get($map, $property);
      $map: map-remove($map, $property);
    }
  }
  @include box($defaults);
  
  // Handle breakpointed properties
  @each $breakpoint-name, $breakpoint-value in $map {
    $breakpoint: get-breakpoint($breakpoint-name);
    @include breakpoint($breakpoint){
      @include box($breakpoint-value);
    }
  }
}

// Tests
// -----------------------------------------------------------------------------

.Block {
  @include box(
    (
      padding: 0 10px,
      margin: 10px,
      border: 20px 5px 10px,
      border-top: 99999px
    )
  );
}

.ResponsiveBlock {
  @include responsive-box(
    (
      margin: 1px,
      padding: 2px,
      border: 1px,
      
      medium-up: (
        padding: 20px,
        margin: 10px,
        border: 1px
      ),
      
      large-up: (
        padding: 30px,
        border: 4px
      )
    )
  );
}

SassMeister-output.css

.Block {
  margin: 10px;
  padding: 0 10px;
  border: 20px 5px 10px;
  border-top: 99999px;
}

.ResponsiveBlock {
  faux-margin: 1px;
  faux-padding: 2px;
  faux-border: 1px;
  margin: 1px;
  padding: 2px;
  border: 1px;
}
@media (min-width: 500px) {
  .ResponsiveBlock {
    margin: 10px;
    padding: 20px;
    border: 1px;
  }
}
@media (min-width: 1000px) {
  .ResponsiveBlock {
    padding: 30px;
    border: 4px;
  }
}

SassMeister-rendered.html

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>