如何让SCSS中&运算符仅对指定父选择器的子元素生效？

问题说明 #

原SCSS代码：

section[data-testid="title-cast"] {
    .ipc-media--avatar-circle,
    .ipc-avatar {
        &,
        .ipc-lockup-overlay,
        .ipc-lockup-overlay__screen {
            border-radius: 5px !important;
        }
    }
}

编译后会同时给.ipc-media--avatar-circle和.ipc-avatar都添加子元素.ipc-lockup-overlay、.ipc-lockup-overlay__screen的样式，但实际需求是仅给.ipc-avatar添加子元素样式，.ipc-media--avatar-circle只需要自身的样式。

修改方案 #

将两个选择器拆分，分别定义对应样式：

section[data-testid="title-cast"] {
    // 仅给 .ipc-media--avatar-circle 自身设置样式
    .ipc-media--avatar-circle {
        border-radius: 5px !important;
    }

    // 给 .ipc-avatar 自身及其子元素设置样式
    .ipc-avatar {
        &,
        .ipc-lockup-overlay,
        .ipc-lockup-overlay__screen {
            border-radius: 5px !important;
        }
    }
}

编译结果 #

修改后的SCSS会编译出预期的CSS：

section[data-testid="title-cast"] .ipc-media--avatar-circle {
    border-radius: 5px !important;
}
section[data-testid="title-cast"] .ipc-avatar,
section[data-testid="title-cast"] .ipc-avatar .ipc-lockup-overlay,
section[data-testid="title-cast"] .ipc-avatar .ipc-lockup-overlay__screen {
    border-radius: 5px !important;
}

这样就精准实现了需求：.ipc-media--avatar-circle仅包含自身样式，.ipc-avatar包含自身和指定子元素的样式。

内容的提问来源于stack exchange，提问作者Raghavan Vidhyasagar