我可以在不重新输入scss中的父级的情况下对元素和子项进行处理吗？

Question

让我们假设我们的html看起来像这样：

<a>
    <span class="title">Foo</span>
    <span class="black-color-important">Bar</span>
    Baz
</a>

让我们说.black-color-important始终保持黑色。 .title已分配颜色。

悬停时，链接和标题中的普通文本应将颜色切换为$primary-color。

我的SCSS看起来像这样：

a:hover, a:hover .title {
    color: $primary-color;
}

有更好的方法吗？或者换句话说，有没有办法，我不必重新输入a:hover？

（如果有帮助，我不在乎a:hover > .title或a:hover .title在我的情况下，.title永远是直接的孩子，但是我试图让问题尽可能公开）

注意：这只是一个抽象的例子，而不是它的真实用例。

Answer 1

如果子元素的状态取决于其父状态，则不能在不重新输入scss中的父元素的情况下编写样式。

但是如果你想为孩子设置常规样式，你可以使用BEM方法，不要重新输入父名。

div.parent
    div.parent__child

.parent {}
.parent__child {}