在嵌套的SCSS结构中使用类或数据选择器定位根元素

Question

我有一个简单的SCSS结构，如下所示：

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

然后，如果nav.main上的data theme属性设置为light，我想将fill属性更改为黑色。

我非常喜欢嵌套并使内容“紧凑”，因此理想情况下，我想做如下所示的事情，但是不幸的是，通过所有不同的组合，我无法解决这个问题。理想情况下，我不想不必输入a.close和svg并使用嵌套。

我一直都遇到这个问题，并且总是从窝里挣脱出来。

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

Answer 1

噢，@at-root行很难阅读。

您可以尝试以下方法：

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