Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>I want "a" to work the same as "b"</p>
<p>
  <a>a</a>
  /
  <b>b</b>
</p>

<p>I want "h" to work the same as "f"</p>
<p>
  <e><f><g>e f g</g></f></e>
  / 
  <e><h><g>e h g</g></h></e>
</p>

<p>I want "l m" to work the same as "j" - but I don't know the relative source orders!</p>
<p>
  <i><j><k>i j k</k></j></i>
  / 
  <i><l><m><k>i l m k</k></m></l></i>
  / 
  <l><i><m><k>l i m k</k></m></i></l>
</p>

SassMeister-input.scss

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----

/* SIMPLE */
a { color: gray; }
b { @extend a; }

/* SLIGHTLY LESS SIMPLE */
e f g { color: green; }
h { @extend f; }

/* HMM... */
i j k { color: red; }
l m { @extend j; }

/* WAT? */
n o p o { color: blue; }
q r { @extend o; }

// This illustrates the shortcomings of the common argument that
// Sass doesn't create bad code, misuse of Sass does. Very quickly,
// it becomes difficult to reason around what created the selectors
// you see in your output.

SassMeister-output.css

/* SIMPLE */
a, b {
  color: gray; }

/* SLIGHTLY LESS SIMPLE */
e f g, e h g {
  color: green; }

/* HMM... */
i j k, i l m k, l i m k {
  color: red; }

/* WAT? */
n o p o, n q r p o, q n r p o, n o p q r, q n o p r, n q r p r, q n r p r {
  color: blue; }

SassMeister-rendered.html

<p>I want "a" to work the same as "b"</p>
<p>
  <a>a</a>
  /
  <b>b</b>
</p>

<p>I want "h" to work the same as "f"</p>
<p>
  <e><f><g>e f g</g></f></e>
  / 
  <e><h><g>e h g</g></h></e>
</p>

<p>I want "l m" to work the same as "j" - but I don't know the relative source orders!</p>
<p>
  <i><j><k>i j k</k></j></i>
  / 
  <i><l><m><k>i l m k</k></m></l></i>
  / 
  <l><i><m><k>l i m k</k></m></i></l>
</p>