Is Extending Classes that have embedded Trailing Ampersands inefficient? I shall investigate!

sass-extending-embedded-trailing-ampersands.scss

// Extending Selectors that use trailing ampersands
// ================================================


// Purpose
// -------
//
// To see what the final rendered output of extending
// modules that include trailing ampersands in a deeply
// nested selector.
//
// This is to showcase the dangers and pitfalls in doing
// so. I expect the results to show the rendered selectors
// will be quite large.


// The Test
// --------

    // My Module
    .x-test {
        @extend %x-test;
    }
    %x-test {
        margin: 10px;
        padding: 10px;

        background: blue;
        
        .x-special-case & {
            background: green;
        }
    }

    // My Dom specific Element
    head {
        ul {
            li {
                .element {
                    @extend %x-test;

                    outline: 1px solid red;
                }
            }
        }
    }


// Results
// -------
//
// As expected, extending classes (even Placeholder classes)
// in this manner results in larger selectors than probably intended:


    .x-special-case .x-test, .x-special-case head ul li .element, head ul li .x-special-case .element {}


// One for each of...
//
// * The class (as opposed to placeholder) version of the selector
// * The extending class' full selector chain
// * The extending class itself, but still as a child within
//   the full selector chain
//
// Note that the placeholder and class version both exist as a
// workaround for dealing with @extend's scoping issues. See
// this article by Chris Lamb for more details:
//
// http://8gramgorilla.com/mastering-sass-extends-and-placeholders/


// Conclusion
// ----------
//
// ...doing this is risky and could potentially get out of
// hand very easily.
//
// Better solution?
//
// Will have to ponder further...
//
// It might be best to avoid extending these classes/modules
// and only apply the class to the markup directly.