Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

// Declared as a project global
$breakpoints: (
  alpha: 30rem,
  beta: 48rem,
  gamma: 60rem
);

// How we might handle the declaration in a component

$default-breakpoints: (
  alpha: 40rem,
  beta: 60rem,
  gamma: 70rem,
  delta: 80rem
);

@if variable-exists(breakpoints) {
  // if we have set some defaults we'd better merge them last
  $breakpoints: map-merge($default-breakpoints, $breakpoints);
} 
@else {
  $breakpoints: $default-breakpoints;
}

@each $name,$breakpoint in $breakpoints {
  @media screen and (min-width: $breakpoint) {
    .text { content: "#{$name}"; }
  }
}

// if we use this method, how do we override with fewer
// entries in the map?  i.e. the project only wants alpha and beta

SassMeister-output.css

@media screen and (min-width: 30rem) {
  .text {
    content: "alpha";
  }
}
@media screen and (min-width: 48rem) {
  .text {
    content: "beta";
  }
}
@media screen and (min-width: 60rem) {
  .text {
    content: "gamma";
  }
}
@media screen and (min-width: 80rem) {
  .text {
    content: "delta";
  }
}