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 class 我想知道如何在 SCSS 中最有效地做到这一点。

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

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

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

Answer 1

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

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

BEM 嵌套元素和悬停效果

BEM nesting elements and hover effects

css

sass

bem