Generated by SassMeister.com.

SassMeister-input-HTML.html

<!--<div class="Block">-->
<!--  <p>Block</p>-->
<!--</div>-->

<!--<div class="ResponsiveBlock">-->
<!--  <p>Responsive Block</p>-->
<!--</div>-->

SassMeister-input.scss

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

@import "breakpoint";

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

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

@function get-breakpoint($name){
  @if map-has-key($breakpoints, $name) {
    @return map-get($breakpoints, $name);
  } @else {
    @error "@get-breakpoint There is no breakpoint named '#{$name}' in the $breakpoints map '#{inspect($breakpoints)}"
  }
}

// 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)));
      $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 !important,
      padding: 2px,
      border: 1px,
      
      medium: (
        padding: 20px,
        margin: 10px,
        border: 1px
      ),
      
      large: (
        padding: 30px,
        border: 4px
      )
    )
  );
}

SassMeister-output.css

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

.ResponsiveBlock {
  margin: 1px !important;
  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="Block">-->
<!--  <p>Block</p>-->
<!--</div>-->

<!--<div class="ResponsiveBlock">-->
<!--  <p>Responsive Block</p>-->
<!--</div>-->