Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Sassy Maps (v0.4.0)
// ----

@import "compass/typography/vertical_rhythm";
@import "breakpoint";
@import "sassy-maps";

// Font Sizes
// -----------------------------------------------------------------------------

$font-sizes: (
  default: (
    line-height: 18px,
    base: 14px,
    medium: 18px,
    large: 22px
  ),
  medium: (
    base: 16px,
    medium: 20px,
    large: 26px
  )
);

@function get-font-size($breakpoint, $name){
  @if map-get-deep($font-sizes, $breakpoint, $name) {
    @return map-get-deep($font-sizes, $breakpoint, $name);
  } @else {
    @error "@get-font-size There is no font-size named '#{$name}' for breakpoint '#{$breakpoint}' in the $font-sizes map '#{inspect($font-sizes)}"
  }
}

$large-font-size: 20px;

// Vertical Rhythm
// -----------------------------------------------------------------------------

$base-font-size: get-font-size(default, base);
$base-line-height: get-font-size(default, line-height);
$round-to-nearest-half-line: true;
$rhythm-unit: 'rem';
$rem-with-px-fallback: false;
@include establish-baseline;

// [Bass] Responsive Font Size
// -----------------------------------------------------------------------------

$font-size-property-names: font-size lines;

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

@mixin render-font-size($map){
  @if map-has-key($map, font-size) {
    $font-size: get-font-size(default, map-get($map, font-size));
    @if map-has-key($map, lines) {
      @include adjust-font-size-to($font-size, map-get($map, lines));
    }@else{
      @include adjust-font-size-to($font-size);
    }
  }
}

// [Bass] Breakpoints
// -----------------------------------------------------------------------------

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

@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)}"
  }
}

// [Bass] 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 render-box($map){
  @each $property in $block-property-names {
    @if map-has-key($map, $property) {
      #{$property}: map-get($map, $property);
    }
  }
}

@mixin 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 render-box($defaults);
  
  // Handle breakpointed properties
  @each $breakpoint-name, $breakpoint-value in $map {
    $breakpoint: get-breakpoint($breakpoint-name);
    @include breakpoint($breakpoint){
      @include render-box($breakpoint-value);
    }
  }
}

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

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

.ResponsiveBlock {
  @include box(
    (
      margin: 1px !important,
      padding: 2px,
      border: 1px,
      
      medium: (
        padding: 20px,
        margin: 10px,
        border: 1px
      ),
      
      large: (
        padding: 30px,
        border: 4px
      )
    )
  );
  
  @include font-size(
    (
      font-size: base,
      lines: 2,
      medium: (
        font-size: base,
        lines: 2
      )
    )
  );
  //@include adjust-font-size-to($base-font-size, 2);
}

SassMeister-output.css

html {
  font-size: 87.5%;
  line-height: 1.28571em;
}

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

.ResponsiveBlock {
  margin: 1px !important;
  padding: 2px;
  border: 1px;
  font-size: 1rem;
  line-height: 2.57143rem;
}
@media (min-width: 500px) {
  .ResponsiveBlock {
    margin: 10px;
    padding: 20px;
    border: 1px;
  }
}
@media (min-width: 1000px) {
  .ResponsiveBlock {
    padding: 30px;
    border: 4px;
  }
}
@media (min-width: 500px) {
  .ResponsiveBlock {
    font-size: 1rem;
    line-height: 2.57143rem;
  }
}