Demonstration of using maps as map keys. #sassmeister

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Singularity.gs (v1.4.0)
// ----

@import "breakpoint";
@import "singularitygs";

// Placeholder registry required by layout-column().
$layout--placeholders: ();

@mixin layout-column($size, $breakpoint, $gutter: false, $grid: null) {
  // Used as map key, to uniquely identify a placeholder.
  $config: (
    size:       $size,
    breakpoint: $breakpoint,
    gutter:     $gutter,
    grid:       $grid
  );
  
  // Generate some debug output.
  debug: "Call to layout-column()";
  
  $placeholder: map-get($layout--placeholders, $config);
  
  @if $placeholder == null {
    
    $placeholder: "%#{unique-id()}";

    // Declare the new placeholder.
    @at-root #{$placeholder} {
      @include breakpoint($breakpoint) {
        @include grid-span($size);

        // Generate some debug output.
        debug: "Generated placeholder: #{$placeholder}";
      }
    }
    
    // Add the generated placeholder, keyed by the config map.
    $layout--placeholders: map-merge($layout--placeholders, ($config: $placeholder));
  }
  
  @extend #{$placeholder};
}


body {
  @include layout-column(6, 1600px);
  @include layout-column(6, 1600px);
  @include layout-column(12, 1200px);
}

SassMeister-output.css

body {
  debug: "Call to layout-column()";
  debug: "Call to layout-column()";
  debug: "Call to layout-column()";
}
@media (min-width: 1600px) {
  body {
    width: 49.15254%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    debug: "Generated placeholder: %uxybuqqgt";
  }
}
@media (min-width: 1200px) {
  body {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    debug: "Generated placeholder: %uxybuqqh1";
  }
}