Sass嵌套，标记为第一个父元素

Question

我的页面上有一个根元素div.container，里面有一个div.block.scarlet，里面有红色作为文本。 但我们也有body 是div.container element 的父级。当body 有.landing 类时，我需要制作粉红色 而不是红色。 我不明白如何正确编写它。请提供语法帮助！

/* how I do it now */
.container {
    .block {
        &.scarlet {
            color: red;
        }
    }
}
body.landing .container {
    .block {
        &.scarlet {
            color: pink;
        }
    }
}

太多额外的复制粘贴代码！可以写成一行吗？也许像 sass & 这样的诡计。我想要什么：

.container {
    .block {
        &.scarlet {
            color: red;
            @if(body.landing || container.landing) { color: pink }
        }
    }
}

这是一个简短的规则，如果根嵌套元素发生变化，我会重新着色我的文本。

Answer 1

您需要使用parent selector reference 从当前上下文构造完整的选择器：

.container {
    .block {
        &.scarlet {
            color: red;
            body.landing & { 
                color: pink; 
            }
        }
    }
}