Adding a modifier class to parent/root selector in nested SCSS to modify styling

Question

In a nested group of SCSS, is it possible to move up a level and apply a modifier class to the parent to overwrite styling?

For example, I have the following SCSS where an image is added to the before/after classes. I need to change the images on a different .btn-- styling. So essentially compiled the CSS would look a bit like .btn--ghost .label:before, .btn--ghost .after {}.

There is more styling to this but I've just stripped it out for this example so it's not a wall of code.

.btn--arrow {
    
    .label {

        &:before,
        &:after {
            background: url(../img/icon-arrow--white.svg) no-repeat 0 0;
        }

        &.btn--ghost & {
                
            &:before,
            &:after {
                background: url(../img/icon-arrow.svg) no-repeat 0 0;
            }
        }
    }
}

I have successfully achieved this with the SCSS outside of the .label, so directly under .btn--arrow (below) but out of curiosity and better understanding I'd be interested to know if it's achievable in the first example I gave.

.btn--arrow {
    
    .label {
        
        &:before,
        &:after {
            background: url(../img/icon-arrow--white.svg) no-repeat 0 0;
        }
    }
    
    &.btn--ghost {
        
        .label {
            
            &:before,
            &:after {
                background: url(../img/icon-arrow.svg) no-repeat 0 0;
            }
        }
    }
}

I have tried moving the & around and using stuff like @at-root but without any success.

Thanks in advance!

I don't believe what you are seeking is possible. Honestly, if I'm understanding correctly, it sounds like it any DRY-ness gained from the solution would lead to some painful maintainability problems. That said, perhaps I simply am not understanding your use case. FWIW, you might be able to achieve the desired optimization with a @mixin or an @extend. — Alexander Nied
Thanks, yeah I was thinking it's probably more hassle than it's worth! I think the later solution is fine. But I'm a bit rusty when it comes to writing code so was wondering if I'd missed/forgotten something. Thanks for the reply @AlexanderNied! :) — user1406440

Quinn Keaveney Quinn Keaveney · Accepted Answer · 2022-07-29T00:26:12

You can qualify a selector by putting & to the right of the intended parent of the selector. Wrapping it in #{} allows you to place it directly beside that parent.

The @at-root rule causes everything proceeding to be emitted at the root instead of using regular nesting.

If you use both and the #{}, I think you can achieve what you are looking for.


.flashlight {
    .light {
        background: yellow;

        @at-root .dead-battery#{&} {
            background: transparent;
        }

        .daytime &{
            background: transparent;
        }
    }
}

This would compile to:

.flashlight .light {
    background: yellow;
}
.dead-battery.flashlight .light {
    background: transparent;
}
.daytime .flashlight .light {
    background: transparent;
}

Adding a modifier class to parent/root selector in nested SCSS to modify styling

1 Answers