BEM 嵌套元素和悬停效果

Question

所以，假设我有以下代码

<div class="list">
    <div class="list__wrapper"> 
        <ul class="list__menu">
            <li class="list__item">
                <a class="list__link">Link</a>
                <p class="list__description">Desc</p>
            </li> 
        </ul>
    </div>
</div>

我的 SCSS 将如下所示：

.list {
    &__wrapper {

    }    

    &__menu {

    }
    ...
}

问题：

我想在 li 上创建一个悬停效果，它将包含 list_link 和一些其他元素，但我只想将颜色更改为 list__link 类，我想知道如何在 SCSS 中最有效地做到这一点。

我目前的解决方案（我不太喜欢）

.list {
    &__item {
        &:hover {
            .list__link {
                 color: $secondary
            }
        }
    }    
}

我确定我做错了什么，因为我感觉我正在打破应该是 SCSS 和 BEM 的优势，但到目前为止我还没有找到解决方案。

Answer 1

您可以通过执行以下操作来简单地选择此选择器：

.list {
  &__item:hover .list__link {
    color: $secondary;
  }
}