Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// sass-maps-plus (ve4d32a1dc2)
// ----

@import "sass-maps-plus";

$base-font-size: 16;

$viewport-width: (
  small: 400,
  medium: 700,
  large: 1000
);

$box: (
  width: 200,
  background-color: brown,
  font-size: 14,
  respond-at: (
    medium: (
      font-size: 19,
      width: 500
   ),
   large: (
     width: 750,
      font-weight: bold
    )
  )
);

$kittens: (
  width: (
    small: 180,
    medium: 400,
    large: 740
  )
);

@mixin respond-to($viewport-size) {

  $breakpoint: map-get-z($viewport, width, $viewport-size);

  @media screen and (min-width: $breakpoint + px) {
    @content;
  }

}

@mixin set-fluid-width-at($component, $parent, $viewport-size: small) {
  
  $component-width: map-get-z($component, $viewport-size);
  $parent-width: map-get-z($parent, width, $viewport-size);
  $result: $component-width / $parent-width * 100%;

  @if $viewport-size == small {
    width: $result;
    @content;
  } @else {
    @include respond-to($viewport-size) {
      width: $result;
      @content;
    }
  }

}

@mixin style-component($component, $options: (), $viewport-size: null) {
  
  @if $viewport-size != null {
    
    $component-at-size: map-get($component, respond-at);
    
    @if map-has-key($component-at-size, $viewport-size) {
      // There are styles for this size.
      $component-styles: map-get($component-at-size, $viewport-size);
      // styles have been extended.
  
      @each $style in $component-styles {
       #{tuple-key($style)} : tuple-value($style);
      }
      
    }
  }
  @else {

    //out: map-inspect($component-styles);
    $component-styles: map-remove($component, respond-at);
    // excess data has been removed.
  
    @each $style in $component-styles {
     #{tuple-key($style)} : tuple-value($style);
    }
    
  }
  
}

.cats {
  @include style-component($box,(),medium);
}

SassMeister-output.css

.cats {
  font-size: 19;
  width: 500;
}