Example: Atomic Design for SCSS

_atom-overlay-badges.scss

@mixin atom-overlay-badges {
  position:       absolute;
  margin:         0;
  padding:        vr(.2) vr(.3);

  line-height:    vr(1);
  font-size:      modular-scale(-4);
  font-weight:    bold;
  color:          #fff;

  letter-spacing: vr(.05);
  text-indent:    vr(.05);

  background:     #ccc;
  border-radius:  vr(.1);

  //override styles
  @content;
}

style.scss

@import 'atom-overlay-badges';

.component {
  .badge {
    @include atom-overlay-badges() {
      top: vr(-.25);
      right: vr(-.25);
      background: #111;
    }
  }
}

mixinを利用してAtomを作ることにより、extend のようにソースを汚すことなく再利用することができる。