未应用Scss子样式[重复]

Question

我无法弄清楚为什么我的 .notes-list__item__contents 在 .note-list__item:hover 上没有变成白色...我的选择器做错了什么？我在文档中找不到类似的案例。

.notes-list {
    list-style-type: none;
    margin: 0;
    padding: 0;

    &__item {
        padding: 30px;
        background-color: $secondary-color;
        border-radius: 15px;
        margin-bottom: 15px;

        &:hover {
            background-color: $accent-color;
            color: #fff;

            &__contents { color: #fff; }
        }

        &__title {
            font-size: 1.125rem;
            font-weight: 600;
        }

        &__contents {
            margin-top: 20px;
            color: $text-color;
            font-weight: 500;
        }
    }
}

<li className="notes-list__item">
    <div className="notes-list__item__title">Title</div>
    <div className="notes-list__item__contents">
      Some contents
    </div>
</li>

拥有这个感觉不是很scss

&:hover {
    .notes-list__item__contents { color: #fff; }
}

Answer 1

所以我检查了你的输出 css 及其结果如下 css

.notes-list__item:hover__contents {
   color: #fff;
}

你可以在悬停伪元素之后看到它的后缀内容。

在嵌套悬停的情况下你必须这样写

&:hover &{
    background-color: green;
    color: #fff;

    &__contents { color: #fff; }
}

这将在 CSS 下方生成

 .notes-list__item:hover .notes-list__item__contents {
     color: #fff;
}