Generated by SassMeister.com.

SassMeister-input.scss

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

// Here is a map containing all placeholders
// (Follow-up from: http://hugogiraudel.com/2014/03/31/getting-the-most-out-of-sass-placeholders/)
// ---
// - The key is the placeholder's name
// - The value is a map of declarations for the placeholder's content
// ---
// Main problem I can see with this technic is
// it makes it impossible to use nesting,
// including `&`
// ---
// Example: 
// %clearfix { 
//   overflow: hidden; 
// }
// ... becomes:
// clearfix: (
//   overflow: hidden
// )

$extend-map: (
  clearfix: (
    overflow: hidden
  ),
  border-box: (
    box-sizing: border-box
  ),
  hide-text: (
    overflow: hidden,
    text-indent: 100%,
    white-space: nowrap
  )
);

// Extend mixin
// Dealing with the extension for you
// --- 
// @param [string] $class: name of the placeholder to @extend
// @param [bool] $extend (true): @extend or @include?
@mixin extend($placeholder, $extend: true) {
  // Getting placeholder's content
  $content: map-get($extend-map, $placeholder);
  
  // If the key doesn't exist in map, 
  // Do nothing and warn the user
  @if $content == null {
    @warn "`#{$class}` doesn't exist in $extend-map.";
  }
  
  // If $extend is set to true (most cases)
  // Extend the placeholder
  @else if $extend == true {
     @extend %#{$placeholder};
  }
  
  // If $extend is set to false
  // Include placeholder's content directly
  @else {
    @each $property, $value in $content {
      #{$property}: $value;
    }
  }
}

// Looping through the placeholders' map
// Instanciating a placeholder everytime
// With $extend set to false so it dumps 
// mixin's core in the placeholder's content
@each $placeholder, $content in $extend-map {
  %#{$placeholder} {
    @include extend($placeholder, $extend: false);
  }
}

// Examples and demos
.clear {
  @include extend(clearfix);
}

@media (min-width: 100px) {
  .clear-in-mq {
    @include extend(clearfix, false);
  }
}

.hide-text {
  @include extend(hide-text);
}

.hide-text {
  @include extend(hide-text);
}

@media (min-width: 100px) {
  .hide-text-in-mq {
    @include extend(hide-text, false);
  }
}

SassMeister-output.css

.clear {
  overflow: hidden;
}

.hide-text {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

@media (min-width: 100px) {
  .clear-in-mq {
    overflow: hidden;
  }
}
@media (min-width: 100px) {
  .hide-text-in-mq {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
}