css - SASS/SCSS - 制作一个选择器，将 "back out"修改选择器的父级

Question

我想在单个代码块中包含选择器的所有相关样式，以便于引用。

在我的应用程序中，选择器的有效样式会根据其所在的上下文发生显着变化。例如，让我们假设这个 CSS:

.container.theme-dark .message
{
    font-size: 16px;
    background-color: black;
    color: white;
}

.container.theme-light .message
{
    font-size: 16px;
    background-color: white;
    color: black;
}

然后，假设我有以下 HTML:

<div>
    <div class="container theme-dark">
        <div class="message">Hello World</div>
    </div>
    <div class="container theme-light">
        <div class="message">Hello World</div>
    </div>
</div>

现在使用 SCSS，我会像这样创建相关的 CSS:

.container
{
    &.theme-dark
    {
        .message
        {
            background-color: black;
            color: white;
        }
    }

    &.theme-light
    {
        .message
        {
            background-color: white;
            color: black;
        }
    }

    .message
    {
        font-size: 16px;
    }
}

我希望能够使用 SCSS 生成该 CSS，并将 .message 元素的所有相关信息放在一个位置。例如(使用一个虚构的 $ 运算符来完成我想要完成的事情):

.container
{
    .message
    {
        font-size: 16px;

        $.theme-light
        {
            background-color: white;
            color: black;
        }

        $.theme-dark
        {
            background-color: black;
            color: white;
        }
    }
}

有什么想法吗？

Answer 1

我认为这可能有效，就像您所说的那样？ (目前，如果您将每个示例标记为“理想的 CSS 输出”、“当前 SCSS，太多 .message block ”和“理想的 SCSS 格式”，这将对我有帮助)

.container
{
    @at-root .message
    {
        font-size: 16px;

        .theme-light &
        {
            background-color: white;
            color: black;
        }

        .theme-dark &
        {
            background-color: black;
            color: white;
        }
    }
}

有了 @at-root，它会生成 .theme-light .message，这对于某些用途来说可能过于宽松，因此不是理想的解决方案。 ..

https://codepen.io/anon/pen/ZMxjEq

基本上 & 被替换为完整的树路径，所以 .container .message，没有 @at-root，将生成.theme-light .container .message，不适用于该结构。也许还要考虑这一点，我会说这是一个合理的妥协:

.container
{
    .message
    {
        font-size: 16px;
    }
    @at-root .message
    {
        .theme-dark
        {
            ...
        }

        .theme-light
        {
            ...
        }
    }
}

是apparently a kind of hacky solution , 但显然有效

This page might have some better guidance as well