Generated by SassMeister.com.

SassMeister-input-HTML.markdown

@extend could easily not work because cascading order is determined by order in which parent selectors are written.

Can we limit 2nd-order inheritance?

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

%foo {
    color: green;
}

%bar {
    color: blue;
}

.bar-fail { // Putting this in front of foo-fail doesn't work
    @extend .foo-fail;
    @extend %foo; // This wouldn't work
}

.foo-fail {
    @extend %bar;
    background: none;
}


%baz {
    background: none;
}

.foo {
    @extend %bar;
    @extend %baz;
}

.bar {
    // @extend .foo;
    @extend %foo;
    @extend %baz;
}

SassMeister-output.css

.bar-fail, .bar {
  color: green;
}

.foo-fail, .bar-fail, .foo {
  color: blue;
}

.foo-fail, .bar-fail {
  background: none;
}

.foo, .bar {
  background: none;
}

SassMeister-rendered.html

<p><code>@extend</code> could easily not work because cascading order is determined by order in which parent selectors are written.</p>

<p>Can we limit 2nd-order inheritance?</p>