Target root element with class or data selector within a nested SCSS structure

Question

I have a simple SCSS structure like the following:

nav.main {
    a.close {
        svg {
            fill: black;
        }
    }
}

I'm then wanting to change the fill property to black if the data theme attribute on nav.main is set to light.

I'm a big fan of nesting and keeping things 'compact' so ideally I'd want to do something like the below, but unfortunately through all my different combinations I can't work out if it's possible. Ideally I'd prefer not to have to type out a.close and svg and use the nesting.

I come up against this all the time and always have break out of the nest.

nav.main {
    a.close {
        svg {
            fill: black;
            @at-root [data-theme="light"]#{&} {
                // nav.main[data-theme="light"] a.close svg
                fill: white;
            }
        }
    }
}

RobertAKARobin RobertAKARobin · Accepted Answer · 2019-08-28T20:15:24

Oof, that @at-root line is hard to read.

You could try this:

a.close svg{
    nav.main &{
        fill: white;
    }
    nav.main[data-theme="light"] &{
        fill: black;
    }
}

Target root element with class or data selector within a nested SCSS structure

2 Answers