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;
        }
    }
}

太多额外的复制粘贴代码！可以一行写吗？也许是像无聊的&一样的技巧。我想要什么：

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

这是一条简短的规则，如果根嵌套元素发生更改，该颜色会为文本重新着色。

Answer 1

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

// dispatch('ride/clearUserData', { root: true }) // FIXME: options passed as payload
dispatch('ride/clearUserData', null, { root: true })

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

1 个答案: