application.scss

// This generates a duplicate selector
h1,
.h1 {
  font-size: 24px; }

.fake-module {
  .fake-header-1 {
    @extend .h1; } }
// compiles to =>
h1,
.h1,
.fake-module .fake-header-1, .fake-module
.fake-header-1 {
  font-size: 24px; }


// These do not:

// One line
h2, .h2 {
  font-size: 24px; }

.fake-module {
  .fake-header {
    @extend .h2; } }
// compiles to =>
h2, .h2, .fake-module .fake-header {
  font-size: 24px; }


// Class-first
.h3,
h3 {
  font-size: 24px; }
// compiles to =>
.h3, .fake-module .fake-header,
h3 {
  font-size: 24px; }

.fake-module {
  .fake-header {
    @extend .h3; } }


// Element extends class
.h4, {
  font-size: 24px; }

h4 {
  @extend .h4; }

.fake-module {
  .fake-header {
    @extend .h4; } }
// compiles to =>
.h4, h4, .fake-module .fake-header {
  font-size: 24px; }