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: (
  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: 40px,
    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-map)}"
  }
}

@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($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;
}

@media (min-width: 500px) {
  html {
    font-size: 100%;
    line-height: 2.5em;
  }
}
.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;
  debug-break: medium;
}
@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: 0.875rem;
    line-height: 5rem;
  }
}