Mixin that allows declarations to be shared between selectors. #sassmeister

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$registry: ();

@mixin common($key, $value) {
  $prefix: "%common-style";
  $index: false;
  $values: ();
  $add: false;
  @if map-has-key($registry, $key) {
    $values: map-get($registry, $key);
    $index: index($values, $value);
  }
  @if $index == false {
    $values: append($values, $value);
    $index: index($values, $value);
    $add: true;
  }
  $placeholder: "#{$prefix}--#{$key}--#{$index}";
  @if $add {
    $registry: map-merge($registry, ($key: $values));
    @at-root #{$placeholder} { #{$key}: $value; }
  }
  @extend #{$placeholder};
}


body {
  @include common(margin, 12px 5px 2em);
  @include common(background, red);
}
html {
  @include common(background, red);
  @include common(margin, 12px 10px);
}

SassMeister-output.css

body {
  margin: 12px 5px 2em;
}
body, html {
  background: red;
}

html {
  margin: 12px 10px;
}