将鼠标悬停在scss中的子选择器

编程问答 2022-06-05

问题描述

所以我有这个HTML代码

<aside class="sidebar">
   <div class="sidebar__logo">....</div>
   ....
</aside>

当我将鼠标悬停在一边时，我希望侧边栏__logo的宽度更改为80px 所以我写这种scss风格

.sidebar {
    width:100px;
    &__logo{
        width : 40px;
    }
    &:hover {
        width:200px;
        & .sidebar__logo {
             width: 80px;
        }
    }
}

这很好用，但不是BEM方法。

如何将其更改为类似这样的内容

.sidebar {
    width:100px;
    &__logo{
        width : 40px;
        & hovered over the parent {
             width : 80px
        }
    }
    &:hover {
        width:200px;

    }
}

解决方法

您可以使用 $self 缓存当前选择器 (&)，然后使用 .sidebar__logo 访问 #{$self}__logo。更多信息：caching current selector

bemsasssass