Generated by SassMeister.com.

SassMeister-input-HTML.jade

.batman
  header.header
    span.sub-header This week's hero
    h2.title-header Batman, the Dark Knight
    span.secert-id Bruce Wayne | Gotham City | CEO & Billionaire 

.superman
  header.header
    span.sub-header This week's hero
    h2.title-header Superman, Man of Steel
    span.secert-id Clark Kent | Metropolis | Reporter 
    
.greenlantern
  header.header
    span.sub-header This week's hero
    h2.title-header Green Lantern, Man of Steel
    span.secert-id John Stewart | Detroit | A rchitect 

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,700italic);
@import url(http://fonts.googleapis.com/css?family=Palanquin+Dark:500,400);

body {margin:0;}
div + div {margin-top:20px;}

$white: white;
$black: black;





@mixin headerStyle($prime, $secondary, $tertiary){
  .title-header {
  font-family: 'Droid Serif', serif;
  font-size: 4em;
  border-top: 5px solid darken($prime, 3.3);
  border-bottom: 5px solid darken($prime, 3.3);
  padding: 0.2em 0;
  margin: 40px 0 20px;
  }
  
  span {font-family: 'Palanquin Dark', sans-serif; font-weight: 400;}
  
  .sub-header {
    background: $tertiary;
    display: inline-block;
    padding: 10px;
    font-family: 'Palanquin Dark', sans-serif;
    text-transform: uppercase;
    //margin-top:30px;
    font-size:12px;
    
    @if $tertiary == $white  {
      color:$black;
    } @else {
      //color:#000000;
    }
  }
  
  .header {
    background: $prime;
    color: $white;
    border-left: 10px solid $secondary;
    padding-left: 30px;
    padding-bottom: 30px;
  }
}

.batman {@include headerStyle(#0060A8,#FFF200,#303030);}
.superman {@include headerStyle(#bb070e,#0060A8,#ffe63a);}
.greenlantern {@include headerStyle(#34a56f,#000000,#ffffff);}


// .title-header {
//   font-family: 'Droid Serif', serif;
//   font-size: 4em;
//   border-top: 5px solid darken(#0060A8, 3.3);
//   border-bottom: 5px solid darken(#0060A8, 3.3);
//   padding: 0.2em 0;
//   margin: 40px 0 20px;
// }

// span {font-family: 'Palanquin Dark', sans-serif; font-weight: 400;}

// .sub-header {
//   background: #303030;
//   display: inline-block;
//   padding: 10px;
//   font-family: 'Palanquin Dark', sans-serif;
//   text-transform: uppercase;
//   //margin-top:30px;
//   font-size:12px;
// }

// .header {
//   background: #0060A8;
//   color: white;
//   border-left: 10px solid #FFF200;
//   padding-left: 30px;
//   padding-bottom: 30px;
// }

SassMeister-output.css

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,700italic);
@import url(http://fonts.googleapis.com/css?family=Palanquin+Dark:500,400);
body {
  margin: 0;
}

div + div {
  margin-top: 20px;
}

.batman .title-header {
  font-family: 'Droid Serif', serif;
  font-size: 4em;
  border-top: 5px solid #005697;
  border-bottom: 5px solid #005697;
  padding: 0.2em 0;
  margin: 40px 0 20px;
}

.batman span {
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 400;
}

.batman .sub-header {
  background: #303030;
  display: inline-block;
  padding: 10px;
  font-family: 'Palanquin Dark', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
}

.batman .header {
  background: #0060A8;
  color: white;
  border-left: 10px solid #FFF200;
  padding-left: 30px;
  padding-bottom: 30px;
}

.superman .title-header {
  font-family: 'Droid Serif', serif;
  font-size: 4em;
  border-top: 5px solid #ab060d;
  border-bottom: 5px solid #ab060d;
  padding: 0.2em 0;
  margin: 40px 0 20px;
}

.superman span {
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 400;
}

.superman .sub-header {
  background: #ffe63a;
  display: inline-block;
  padding: 10px;
  font-family: 'Palanquin Dark', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
}

.superman .header {
  background: #bb070e;
  color: white;
  border-left: 10px solid #0060A8;
  padding-left: 30px;
  padding-bottom: 30px;
}

.greenlantern .title-header {
  font-family: 'Droid Serif', serif;
  font-size: 4em;
  border-top: 5px solid #309866;
  border-bottom: 5px solid #309866;
  padding: 0.2em 0;
  margin: 40px 0 20px;
}

.greenlantern span {
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 400;
}

.greenlantern .sub-header {
  background: #ffffff;
  display: inline-block;
  padding: 10px;
  font-family: 'Palanquin Dark', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  color: black;
}

.greenlantern .header {
  background: #34a56f;
  color: white;
  border-left: 10px solid #000000;
  padding-left: 30px;
  padding-bottom: 30px;
}

SassMeister-rendered.html

<div class="batman">
  <header class="header"><span class="sub-header">This week's hero</span>
    <h2 class="title-header">Batman, the Dark Knight</h2><span class="secert-id">Bruce Wayne | Gotham City | CEO & Billionaire </span>
  </header>
</div>
<div class="superman">
  <header class="header"><span class="sub-header">This week's hero</span>
    <h2 class="title-header">Superman, Man of Steel</h2><span class="secert-id">Clark Kent | Metropolis | Reporter </span>
  </header>
</div>
<div class="greenlantern">
  <header class="header"><span class="sub-header">This week's hero</span>
    <h2 class="title-header">Green Lantern, Man of Steel</h2><span class="secert-id">John Stewart | Detroit | A rchitect </span>
  </header>
</div>