使用 BEM 和 Less 时，如何在子元素上应用悬停选择器？答案

【问题标题】：How do I apply a hover selector on a child element when using BEM and Less?使用 BEM 和 Less 时，如何在子元素上应用悬停选择器？
【发布时间】：2019-09-10 17:48:45
【问题描述】：

这是我第一次在同一个项目中使用 BEM 和更少。

我目前遇到了&:hover 的问题并尝试定位子选择器。

我了解了 less 工作方式的要点，我知道为什么这不起作用，但我不明白我将如何解决它。

目前我有以下

.sidebar {

    &__item {

        &:hover {
            background: rgba(0,0,0,.06);

            &-name {
                color: @primary;
            }
        }
    }
}

如您所见，问题出在&-name 选择器上。

DOM 的当前结构是这样的......

ul.sidebar
    li.sidebar__item
        a
        span.sidebar__item-name

当我将鼠标悬停在 sidebar__item 上时，我想在项目和子项上触发悬停效果。

【问题讨论】：

标签： html css less bem

【解决方案1】：

将&_item-name 与&__item 相加，这样你就会得到预期的结果！

  .sidebar {

    &__item {

      &-name {
        &:hover {
            background: rgba(0,0,0,.06);
        }
      }

    }
}

编码愉快！

【讨论】：

这看起来不错，但唯一会影响悬停当前的工作方式以及背景也将应用于__item-name？我只想在悬停时应用颜色更改__item-name
或者你的意思是&__item:hover &__item-name { background: #ccc } ?!

【解决方案2】：

sass interpolation

也许对你有帮助

.sidebar {    
    &__item {
        $item: &;
        &:hover {
            background: rgba(0,0,0,.06);
            #{$item}-name {
                color: @primary;
            }
        }
    }
}

这个选项也可能适合

.sidebar {    
    &__item {
        &:hover & {
            background: rgba(0,0,0,.06);
            &-name {
                color: @primary;
            }
        }
    }
}

【讨论】：