Generated by SassMeister.com.

SassMeister-input-HTML.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="hero hero--devry">
  <h1>Module</h1>
</div>

<div class="hero hero--keller">
  <h1>Module</h1>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$devry-colors: (
  primary: blue,
  secondary: white
);

$keller-colors: (
  primary: red,
  secondary: #f0e9d2
);

@mixin component($config: ()) {
  // Extending the default arguments with the given object
  $config: map-merge((
    'theme': default,
    'name': 'module',
    'spacing': 1em,
    'size': 100%,
    'border': false
  ), $config);
  
  // Dumping CSS
  .#{map-get($config, name)} {
    margin-bottom: map-get($config, spacing);
    padding: map-get($config, spacing);
    width: map-get($config, size); 
    
    &--#{map-get($config, theme)} {
      
    $theme: map-get($config, theme);
      @if $theme == "default" {
        background: #333;
        color: #FEFEFE;
      }
      @if $theme == "devry" {
        background: map-get($devry-colors, primary);
        color: map-get($devry-colors, secondary);
        
        @if map-get($config, border) == true {
          border: 3px solid red;  
        }
      }
      @if $theme == "keller" {
        background: map-get($keller-colors, primary);
        color: map-get($keller-colors, secondary);
        
        @if map-get($config, border) == true {
          border: 3px solid teal;  
        }        
      }       
    }
  }
}

@include component((
  theme: keller,
  name: 'hero',
  border: false
));

@include component((
  theme: devry,
  name: 'hero',
  border: true
));


@mixin display (
  $disp,
  $padding: null,
  $right-margin: null,
  $left-margin: null) {
    display: $disp;
    padding: $padding;
    margin-left: $left-margin;
    margin-right: $right-margin;
}


$icons: (
  fontawesome: 'FontAwesome',
  linkedin: '\f0e1',
  twitter: '\f099',
  facebook: '\f09a',
  instagram: '\f16d',
  phone: '\f095',
  hamburger: '\f0c9'
);

@each $name, $icon in $icons {
  .icon-#{$name}:before {
    content: $icon;
    font-family: map-get($icons, fontawesome);
  }
}

SassMeister-output.css

@charset "UTF-8";
.hero {
  margin-bottom: 1em;
  padding: 1em;
  width: 100%;
}
.hero--keller {
  background: red;
  color: #f0e9d2;
}

.hero {
  margin-bottom: 1em;
  padding: 1em;
  width: 100%;
}
.hero--devry {
  background: blue;
  color: white;
  border: 3px solid red;
}

.icon-fontawesome:before {
  content: "FontAwesome";
  font-family: "FontAwesome";
}

.icon-linkedin:before {
  content: "";
  font-family: "FontAwesome";
}

.icon-twitter:before {
  content: "";
  font-family: "FontAwesome";
}

.icon-facebook:before {
  content: "";
  font-family: "FontAwesome";
}

.icon-instagram:before {
  content: "";
  font-family: "FontAwesome";
}

.icon-phone:before {
  content: "";
  font-family: "FontAwesome";
}

.icon-hamburger:before {
  content: "";
  font-family: "FontAwesome";
}

SassMeister-rendered.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="hero hero--devry">
  <h1>Module</h1>
</div>

<div class="hero hero--keller">
  <h1>Module</h1>
</div>