Generated by SassMeister.com.

SassMeister-input.scss

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

@import "sass-maps-plus";

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

$box: (
  width: (
    small: 200,
    medium: 500,
    large: 750
  )
);

$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, width, $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;
    }
  }

}

.box {
  @include set-fluid-width-at($box, $viewport);
  @include set-fluid-width-at($box, $viewport, medium) {
    border: solid;
  }
  @include set-fluid-width-at($box, $viewport, large) {
    border: dotted;
  }
}

.kittens {
  @include set-fluid-width-at($kittens, $box);
  @include set-fluid-width-at($kittens, $box, medium) {
    border: solid;
  }
  @include set-fluid-width-at($kittens, $box, large) {
    border: dotted;
  }
}

SassMeister-output.css

.box {
  width: 50%;
}
@media screen and (min-width: 700px) {
  .box {
    width: 71.42857143%;
    border: solid;
  }
}
@media screen and (min-width: 1000px) {
  .box {
    width: 75%;
    border: dotted;
  }
}

.kittens {
  width: 90%;
}
@media screen and (min-width: 700px) {
  .kittens {
    width: 80%;
    border: solid;
  }
}
@media screen and (min-width: 1000px) {
  .kittens {
    width: 98.66666667%;
    border: dotted;
  }
}