Cacher is the code snippet organizer for pro developers

.element-a, .element-b {
  width: 100%;
}
.element-a, .element-c, .element-d {
  height: 5em;
}

.element-b {
  height: 1px;
}

.element-c, .element-d {
  width: 1px;
}

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

// Overengineering mixin output
// By caching values and on-the-fly generating placeholders
// Clever and crazy. I like it so far.
// ---

// Map storing values when a mixin is being called
// Keys are dynamically added
// Values are dynamically updated
// Everything is dynamic. And cool.
$cache: ();

// A mixin caching values in a map
// And generating placeholders on the fly
// To avoid mixin repetitions
// ---
// @param [map] $declarations: map of properties/values to cache
// ---
@mixin cache($declarations) {
  // Looping through all properties/values from map
  @each $property, $value in $declarations {
    // Get the stored values for the current property
    $stored-values: map-get($cache, $property);
    
    // If the value doesn't exist in stored values
    @if $value != null and not index($stored-values, $value) {
      // Add it
      $cache: map-merge($cache, ($property: append($stored-values or (), $value))) !global;
      // Refresh variable
      $stored-values: map-get($cache, $property); 
      // And create a placeholder at root level
      @at-root %#{$property}-#{length($stored-values)} {
        #{$property}: $value;
      }
    }
    
    // Extend the placeholder
    // `!optional` is here as a security measure
    // To avoid a crash if a placeholder hasn't been generated
    @extend %#{$property}-#{index($stored-values, $value)} !optional;
  }
}

// A mixin defining both the width and the height
// ---
// @param: [number] $width: width
// @param: [number] $height ($width): height
// ---
@mixin size($width, $height: $width) {
  // Instead of regularly defining properties
  // Move them to the cache mixin
  // So they get cached and optimized
  @include cache((
    width: $width,
    height: $height
  ));
}

// Demo
// ---

.element-a {
  @include size(100%, 5em);
}

.element-b {
  @include size(100%, 1px);
}

.element-c {
  @include size(1px, 5em);
}

.element-d {
  @include size(1px, 5em);
}