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);
  
  // generating the 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
));

SassMeister-output.css

.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;
}

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>