Generated by SassMeister.com.

SassMeister-input.scss

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

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

@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;
      }
    }
  }
}


// USER FACING:
$mq-variables: (
  'primary-color': red,
  'font': sans-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');
}

@media (min-width: 500px) {
  @include mq-variables((
    'primary-color': blue,
    'font': Georgia
  ));
}

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: blue;
  }
  body h1 {
    font-family: Georgia;
  }
}