Module SCSS

component-name.scss

.y-thingy {
    $root: &; // Store it for later use...
    
    background-color: pink;
    border: 1px solid purple;
  
    &__content {
        margin: {
            top: 5px;
            bottom: 10px;
        }

        // The last thingy's content element has margin-bottom 0
        #{$root}:last-of-type & {
            margin-bottom: 0;
        }
    }
  
    &__menu {
        $menu-name: &; // For later use...
        
        background-color: white;
        padding: 5px;

        &--is-active {
            background-color: pink;
        }

        &__toolbar {
            /* ^ Now two blocks down. But name not unwieldy? */
            float: right;
            background-color: #999;
            
            #{$menu-name}--is-active & {
                background-color: pink;
            }
        }
    }
}