Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// Concept & original code by Roy Tomeij (@roy): http://sassmeister.com/gist/e170fbabf144a4fd3911
// Edited by James Steinbach (@jdsteinbach)

// LIBRARY:
$mq-properties: ();
$mq-variables: ();

@mixin set-mq-variable($key, $value) {
  $mq-variables: map-merge($mq-variables, ($key: $value)) !global;
}

@mixin mq-property($property, $var) {
  $parent: &;
  $selector: if(length($parent) == 1, nth($parent, 1), $parent);

  @if map-has-key($mq-properties, $var) {
    $selector: append(nth(map-get($mq-properties, $var), 1), $selector);
  }
  $mq-properties: map-merge($mq-properties, ($var: $selector $property)) !global;

  #{$property}: map-get($mq-variables, $var);
}

@mixin mq-variables($overrides) {
  @each $var, $value in $overrides {
    @if (map-has-key($mq-properties, $var)) {
      $item: map-get($mq-properties, $var);
      #{nth($item, 1)} {
        #{nth($item, 2)}: $value;
      }
    }
  }
}

@mixin mq-variations($variations) {
  @each $width, $map in $variations {
    @media (min-width: $width) {
      @include mq-variables($map);
    }
  }
}


// USER FACING:
@include set-mq-variable('primary-color', red);
@include set-mq-variable('font', sans-serif);


$mq-variations: (
  500px: (
    'primary-color': teal,
    'font': (Lucida Grande, sans-serif)
  ),
  1000px: (
    'primary-color': orange,
    'font': (Palatino, serif)
  )
);

.element,
.foo {
  background: fuchsia;
  @include mq-property(color, 'primary-color');
}

body h1 {
  font-size: 200%;
  @include mq-property(color, 'primary-color');
  @include mq-property(font-family, 'font');
}


@include mq-variations($mq-variations);

SassMeister-output.css

.element,
.foo {
  background: fuchsia;
  color: red;
}

body h1 {
  font-size: 200%;
  color: red;
  font-family: sans-serif;
}

@media (min-width: 500px) {
  .element, .foo, body h1 {
    color: teal;
  }
  body h1 {
    font-family: Lucida Grande, sans-serif;
  }
}

@media (min-width: 1000px) {
  .element, .foo, body h1 {
    color: orange;
  }
  body h1 {
    font-family: Palatino, serif;
  }
}