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";

// [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)}"
  }
}

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

$font-sizes: (
  default: (
    base: 14px,
    medium: 18px,
    large: 22px
  ),
  medium: (
    base: 14px,
    medium: 18px,
    large: 22px
  )
);

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

// Rhythm
// -----------------------------------------------------------------------------

$rhythm-units: (
  single: 1,
  double: 2,
  tripple: 3,
  quadruple: 4,
  three-quarters: 0.75,
  quarter: 0.25,
  half: 0.5,
  third: 0.333333333333,
  two-thirds: 0.666666666666
);

$vertical-rhythms: (
  default: (
    base-line-height: 18px,
    base-font-size: 14px
  ),
  medium: (
    base-line-height: 23px,
    base-font-size: 16px
  )
);

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

@function has-vertical-rhythm-for-breakpoint($breakpoint-name) {
  @return map-has-key($vertical-rhythms, $breakpoint-name);
}

// Teporarily use different values for calculating vertical-rhythm
@mixin use-baseline($breakpoint-name) {
  
   // Get rhythm values for this $breakpoint
   $new-base-font-size: get-vertical-rhythm($breakpoint-name, base-font-size);
   $new-base-line-height: get-vertical-rhythm($breakpoint-name, base-line-height);
  
   // Save the baseline context
   $initial-font-size: $base-font-size;
   $initial-line-height: $base-line-height;

   // Apply the new context
   $base-font-size: $new-base-font-size !global;
   $base-line-height: $new-base-line-height !global;
 
   // Render content
   @content;

   // Reapply the initial context
   $base-font-size: $initial-font-size !global;
   $base-line-height: $initial-line-height !global;
}

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

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

@include breakpoint(get-breakpoint(medium)){
  @include use-baseline(medium){
    @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(default, $defaults);
  
  // Handle breakpointed properties
  @each $breakpoint-name, $breakpoint-value in $map {
    debug-break: $breakpoint-name;
    $breakpoint: get-breakpoint($breakpoint-name);
    @include breakpoint($breakpoint){
      @include render-font-size($breakpoint-name, $breakpoint-value);
    }
  }
}

@mixin render-font-size($breakpoint-name, $map){
  @if map-has-key($map, font-size) {
    $font-size: get-font-size($breakpoint-name, map-get($map, font-size));
    $lines: map-get($map, lines);
    @if $breakpoint-name != default and has-vertical-rhythm-for-breakpoint($breakpoint-name){
      
      @include use-baseline($breakpoint-name){
        @include do-render-font-size($font-size, $lines);
      }
      
    }@else{
      @include do-render-font-size($font-size, $lines);
    }
    
  }
}

@mixin do-render-font-size($font-size, $lines: null){
  @if $lines {
     @include adjust-font-size-to($font-size, $lines);
  }@else{
     @include adjust-font-size-to($font-size);
  }
}



// [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($breakpoint-name, $map){
  @each $property in $block-property-names {
    @if map-has-key($map, $property) {
      
      @if $breakpoint-name != default {
        @include use-baseline($breakpoint-name){
          @include render-box-property($breakpoint-name, $property, map-get($map, $property));
        }
      } @else {
        @include render-box-property($breakpoint-name, $property, map-get($map, $property));
      }
    }
  }
}
//
@mixin render-box-property($breakpoint-name, $property, $value) {
  $unit: rhythm();
  $parsed-values: '';
  $parsed-value: null;
  @each $component in $value{
    @if map-has-key($rhythm-units, $component){
      $parsed-value: $unit * map-get($rhythm-units, $component);
    }@else if $component != !important and unitless($component) {
      $parsed-value: $unit * $component;
    }@else {
      $parsed-value: $component;
    }
    $parsed-values: "#{$parsed-values} #{$parsed-value}";
  }
  #{$property}: #{$parsed-values};
}


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

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

// .Block {
//   @include box(
//     (
//       padding: half 3 1
//     )
//   );
// }

.ResponsiveBlock {
  @include box(
    (
      margin: single,
      
      medium: (
        margin: single
      )
    )
  );
  
  // @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;
}

@media (min-width: 500px) {
  html {
    font-size: 100%;
    line-height: 1.4375em;
  }
}
.ResponsiveBlock {
  margin:  1.28571rem;
}
@media (min-width: 500px) {
  .ResponsiveBlock {
    margin:  1.4375rem;
  }
}