Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

$media: (
  heading-font-size: 24px,
  body-font-size: 16px,
  width: 300,
  img-height: 120px,
  img-width: 120px,
  left: (
    media-version: left,
    img-position: left,
  ),
  right: (
    img-position: right,
  ),
  top: (
    float: both,
  )
);

@mixin media($media-type, $name) {
.media {
  width: map-get($media, width);
  > img {
    height: map-get(map-get($media, $media-type), img-height);;
    width: map-get($media, width);
  }
  @at-root {
      .media--#{$name} {
        > img {
          float: map-get(map-get($media, $media-type), img-position);;
          clear: map-get(map-get($media, $media-type), float);;
        }
      h3 {
        font-size: map-get($media, heading-font-size);;
      }
      p {
        font-size: map-get($media, body-font-size);;
      }
    }
  }
  }
}

@include media(top, top);

SassMeister-output.css

.media {
  width: 300;
}
.media > img {
  width: 300;
}
.media--top > img {
  clear: both;
}
.media--top h3 {
  font-size: 24px;
}
.media--top p {
  font-size: 16px;
}