Generated by SassMeister.com.

SassMeister-input-HTML.html

<!-- <h2>Standard</h2>
<div class="icr-main-info-glyphs">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<h2>Standard - flipped</h2>
<div class="icr-main-info-glyphs-1">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<h2>Stacked</h2>
<div class="icr-main-info-glyphs-2">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<h2>Compress</h2>
<div class="icr-main-info-glyphs-3">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<h2>Decompress</h2>
<div class="icr-main-info-glyphs-4">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<figure class="icr-main-info-displays">
  <div class="media-graphic">
    <img src="http://media.spiralknights.com/wiki-images/3/37/Monster-Gun_Puppy.png">
  </div>
  <figcaption class="media-content">
        <h3>Media Content Header</h3>
        <p>Media Content Body</p>
  </figcaption>
</figure>

-->


<!-- use with an icon -->
<div class="icr-portal-user-data">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<!-- use with an image -->
<figure class="icr-main-flow-glyphs">
  <div class="media-graphic">
    <img src="http://media.spiralknights.com/wiki-images/3/37/Monster-Gun_Puppy.png">
  </div>
  <figcaption class="media-content">
        <h3>Media Content Header</h3>
        <p>Media Content Body</p>
  </figcaption>
</figure>

SassMeister-input.sass

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

*
  margin: 0
  padding: 0

img, i
  vertical-align: top
.svg-ico-robot, .svg-ico-robot-active
  width: 200px
  height: 200px
  
.svg-ico-robot
  background: url(http://static.parastorage.com/media/bffdcf_ae847b8b39d24cd3ac6bdf4edf923a99.png_256)

.svg-ico-robot-active
  background: url(http://fc00.deviantart.net/fs71/f/2014/147/d/c/35_haruhi_fujioka_icons_by_toxxiclovve-d7jybwz.png)
  
%icr-u-pseudo-icon
  content: ''
  background-repeat: no-repeat
  background-position: center
  
// this is our base media class
=icr-u-media-element-props
  display: table
  .media-graphic
    vertical-align: middle
  .media-content, .media-graphic
    display: table-cell
    
=icr-u-icr-u-media--stacked-props
  text-align: center
  
=icr-u-generate-media($breakpoint)
  %icr-u-media-element
    +icr-u-media-element-props
  %icr-u-media--stacked
    +icr-u-icr-u-media--stacked-props
  @media screen and (max-width: $breakpoint)
    %icr-u-media-element--mobile-#{$breakpoint}
      +icr-u-media-element-props
    %icr-u-media--stacked--mobile-#{$breakpoint}
      +icr-u-icr-u-media--stacked-props
  @media screen and (min-width: $breakpoint + 1)
    %icr-u-media-element--except-mobile-#{$breakpoint}
      +icr-u-media-element-props
    %icr-u-media--stacked--except-mobile-#{$breakpoint}
      +icr-u-icr-u-media--stacked-props
    
=icr-u-media--stacked($icon, $arrangement)
  @if $icon
    &::#{$arrangement}
      display: inline-block

=icr-u-media--standard($content-alignment, $icon, $arrangement)
  .media-content
    vertical-align: $content-alignment
  @if $icon
    &::#{$arrangement}
      display: table-cell

=icr-u-media($content-alignment, $mode, $arrangement, $breakpoint, $icon: false)

  @if $mode == stacked or $mode == decompress
    @extend %icr-u-media--stacked
    +icr-u-media--stacked($icon, $arrangement)
    
  @if $mode == standard
    @extend %icr-u-media-element
    +icr-u-media--standard($content-alignment, $icon, $arrangement)
    
  @if $mode == decompress
    @media screen and (max-width: $breakpoint)
      @if $breakpoint
        @extend %icr-u-media-element--mobile-#{$breakpoint}
      +icr-u-media--standard($content-alignment, $icon, $arrangement)
        
  @if $mode == compress
    @media screen and (max-width: $breakpoint)
      @if $breakpoint
        @extend %icr-u-media--stacked--mobile-#{$breakpoint}
      +icr-u-media--stacked($icon, $arrangement)
    @media screen and (min-width: $breakpoint + 1)
      @if $breakpoint
        @extend %icr-u-media-element--except-mobile-#{$breakpoint}
      +icr-u-media--standard($content-alignment, $icon, $arrangement)
      
  @if $icon
    &::#{$arrangement}
      @extend #{$icon}
      @extend %icr-u-pseudo-icon


=get-media($name, $icon: false, $selectorMap: ())
  $get-media-temp-map: map-get($icr-u-media-store, $name) //(middle, standard, false, before)
  // really just fail-safe setting default values here
  // sass has no other method for checking existance of a value in a list
  $content-alignment-temp: if(length($get-media-temp-map) > 0, nth($get-media-temp-map, 1), middle)
  $mode-temp: if(length($get-media-temp-map) > 1, nth($get-media-temp-map, 2), standard)
  $arrangement-temp: if(length($get-media-temp-map) > 2, nth($get-media-temp-map, 3), before)
  $breakpoint-temp: if(length($get-media-temp-map) > 3, nth($get-media-temp-map, 4), false)
  
  +icr-u-media($content-alignment-temp, $mode-temp, $arrangement-temp, $breakpoint-temp, $icon)
  @extend %#{$name}
  // loop through selector map and generate state classes
  @each $selector, $icon-state in $selectorMap
    &#{$selector}
      &::#{nth($get-media-temp-map, 3)}
        @extend #{$icon}-#{$icon-state}
        
// sass list to store maps (with embedded lists) of the settings for each list
$icr-u-media-store: ()

@function icr-u-create-media($name, $props)
  @return map-merge($icr-u-media-store, ($name: $props))
  
// mixin that registers the media with all settings, and creates an abstract class for use within get-media
=create-media($name, $props: ())
  $icr-u-media-store: icr-u-create-media($name, $props) !global
  // only way to check for existance of a property in sass
  @if length($props) > 3
    +icr-u-generate-media(nth($props, 4)) // register the media directives
  @at-root %#{$name} // @at-root not needed, although the next version of sass might require it
    @content

$mobile-breakpoint: 1000px
$desktop-breakpoint: 2000px
// generate media directive breakpoints for mobile

// register a new reuseable media component
+create-media(icr-main-info-glyphs, (middle, compress, before, $desktop-breakpoint))
  background: blue
  .media-content
    padding-left: 20px
  
+create-media(icr-main-info-displays, (middle, standard))
  background: green
  color: red

// actual use
.icr-portal-user-data
  +get-media(icr-main-info-glyphs, '.svg-ico-robot', (':active': active))

.icr-main-flow-glyphs
  +get-media(icr-main-info-displays)

SassMeister-output.css

* {
  margin: 0;
  padding: 0;
}

img, i {
  vertical-align: top;
}

.svg-ico-robot, .icr-portal-user-data::before, .svg-ico-robot-active, .icr-portal-user-data:active::before {
  width: 200px;
  height: 200px;
}

.svg-ico-robot, .icr-portal-user-data::before {
  background: url(http://static.parastorage.com/media/bffdcf_ae847b8b39d24cd3ac6bdf4edf923a99.png_256);
}

.svg-ico-robot-active, .icr-portal-user-data:active::before {
  background: url(http://fc00.deviantart.net/fs71/f/2014/147/d/c/35_haruhi_fujioka_icons_by_toxxiclovve-d7jybwz.png);
}

.icr-portal-user-data::before {
  content: "";
  background-repeat: no-repeat;
  background-position: center;
}

.icr-main-flow-glyphs {
  display: table;
}
.icr-main-flow-glyphs .media-graphic {
  vertical-align: middle;
}
.icr-main-flow-glyphs .media-content, .icr-main-flow-glyphs .media-graphic {
  display: table-cell;
}

@media screen and (max-width: 2000px) {
  .icr-portal-user-data {
    text-align: center;
  }
}
@media screen and (min-width: 2001px) {
  .icr-portal-user-data {
    display: table;
  }
  .icr-portal-user-data .media-graphic {
    vertical-align: middle;
  }
  .icr-portal-user-data .media-content, .icr-portal-user-data .media-graphic {
    display: table-cell;
  }
}
.icr-portal-user-data {
  background: blue;
}
.icr-portal-user-data .media-content {
  padding-left: 20px;
}
.icr-main-flow-glyphs {
  background: green;
  color: red;
}
@media screen and (max-width: 2000px) {
  .icr-portal-user-data::before {
    display: inline-block;
  }
}
@media screen and (min-width: 2001px) {
  .icr-portal-user-data .media-content {
    vertical-align: middle;
  }
  .icr-portal-user-data::before {
    display: table-cell;
  }
}

.icr-main-flow-glyphs .media-content {
  vertical-align: middle;
}

SassMeister-rendered.html

<!-- <h2>Standard</h2>
<div class="icr-main-info-glyphs">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<h2>Standard - flipped</h2>
<div class="icr-main-info-glyphs-1">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<h2>Stacked</h2>
<div class="icr-main-info-glyphs-2">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<h2>Compress</h2>
<div class="icr-main-info-glyphs-3">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<h2>Decompress</h2>
<div class="icr-main-info-glyphs-4">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<figure class="icr-main-info-displays">
  <div class="media-graphic">
    <img src="http://media.spiralknights.com/wiki-images/3/37/Monster-Gun_Puppy.png">
  </div>
  <figcaption class="media-content">
        <h3>Media Content Header</h3>
        <p>Media Content Body</p>
  </figcaption>
</figure>

-->


<!-- use with an icon -->
<div class="icr-portal-user-data">
    <div class="media-content">
         <h3>Media Content Header</h3>
        <p>Media Content Body</p>
    </div>
</div>

<!-- use with an image -->
<figure class="icr-main-flow-glyphs">
  <div class="media-graphic">
    <img src="http://media.spiralknights.com/wiki-images/3/37/Monster-Gun_Puppy.png">
  </div>
  <figcaption class="media-content">
        <h3>Media Content Header</h3>
        <p>Media Content Body</p>
  </figcaption>
</figure>