Generated by SassMeister.com.

Subclassing Modules in Modular CSS.html

<div class="pod">
  <div class="pod-content">My cool content</div>
</div>

<div class="widget">
  <div class="pod widget-pod">
    <div class="pod-content">Cool Widget content</div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----

/* === Begin configuration === */
@import "susy";
@import "breakpoint";

$pod-color: rgba(255, 0, 0, .1);
$widget-color: rgba(0, 255, 0, .1);

.pod { 
  width: 100%;
  background-color: $pod-color;
  
  .pod-content { 
    width: 50%;
    margin: 0 auto;
    
    background-color: $pod-color;
  }
}

//=================

.widget {
  /* ... */
  background-color: $widget-color;
}
 
.widget-pod {
  &.pod { 
    width: 180px;
    background-color: $pod-color;
  }
 
  &.pod .pod-content { 
    width: 100%;
    background-color: $pod-color;
  }
}

SassMeister-output.css

/* === Begin configuration === */
.pod {
  width: 100%;
  background-color: rgba(255, 0, 0, 0.1);
}
.pod .pod-content {
  width: 50%;
  margin: 0 auto;
  background-color: rgba(255, 0, 0, 0.1);
}

.widget {
  /* ... */
  background-color: rgba(0, 255, 0, 0.1);
}

.widget-pod.pod {
  width: 180px;
  background-color: rgba(255, 0, 0, 0.1);
}
.widget-pod.pod .pod-content {
  width: 100%;
  background-color: rgba(255, 0, 0, 0.1);
}

SassMeister-rendered.html

<div class="pod">
  <div class="pod-content">My cool content</div>
</div>

<div class="widget">
  <div class="pod widget-pod">
    <div class="pod-content">Cool Widget content</div>
  </div>
</div>