Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="card">
  <h1 class="data-header">Unstyled Card Shared Styles</h1>
  <p class="data-subtitle">shared styles of both cards</p>
</div>

<div class="card--primary">
  <h1 class="data-header">Header on Primary Card</h1>
  <p class="data-subtitle">subtitle on primary card</p>
</div>

<div class="card--secondary">
  <h1 class="data-header">Header on Secondary Card</h1>
  <p class="data-subtitle">subtitle on secondary card</p>
</div>

SassMeister-input.scss

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

$color--card-header: pink;
$color--subtitle: lightgray;
$color--card-bg: navy;
$color--card-outline: hotpink;
$color--text: black;
$color--secondary: tomato;
$color--text--inverted: invert($color--text);

%card {
  display: inline-block;
  max-width: 20em;
  padding: 1em 2em;
  margin: .5em;
  font-family: 'Open Sans', sans-serif;
  
  .data-header {
    font-size: 2.4em;
  }
  
  .data-subtitle {
    font-size: 1.2em;
    color: $color--subtitle;
    font-style: italic;
  }
}

.card {
  @extend %card; // should we do this? this is optional.
  
  &--primary {
    @extend %card;
    background-color: $color--card-bg;
    outline: 4px solid $color--card-outline;
    color: $color--text;
    
    .data-header {
      color: $color--card-header;
    }
  }
  
  &--secondary {
    @extend %card;
    background-color: $color--secondary;
    color: $color--text--inverted;
    
    .data-header {
      color: $color--text;
    }
  }
}

SassMeister-output.css

.card, .card--primary, .card--secondary {
  display: inline-block;
  max-width: 20em;
  padding: 1em 2em;
  margin: .5em;
  font-family: 'Open Sans', sans-serif;
}
.card .data-header, .card--primary .data-header, .card--secondary .data-header {
  font-size: 2.4em;
}
.card .data-subtitle, .card--primary .data-subtitle, .card--secondary .data-subtitle {
  font-size: 1.2em;
  color: lightgray;
  font-style: italic;
}

.card--primary {
  background-color: navy;
  outline: 4px solid hotpink;
  color: black;
}
.card--primary .data-header {
  color: pink;
}
.card--secondary {
  background-color: tomato;
  color: white;
}
.card--secondary .data-header {
  color: black;
}

SassMeister-rendered.html

<div class="card">
  <h1 class="data-header">Unstyled Card Shared Styles</h1>
  <p class="data-subtitle">shared styles of both cards</p>
</div>

<div class="card--primary">
  <h1 class="data-header">Header on Primary Card</h1>
  <p class="data-subtitle">subtitle on primary card</p>
</div>

<div class="card--secondary">
  <h1 class="data-header">Header on Secondary Card</h1>
  <p class="data-subtitle">subtitle on secondary card</p>
</div>