SCSS：父级hover选择器

Question

在SCSS中，我们可以使用父选择器类：

<div class="parent is-active">
  <div class="children"></div>
</div>

.parent {
  width: 200px;
  height: 200px;
}

.children {
  height: 100px;
  width: 100px;

  .is-active & {
    background: red;
  }
}

例子

如何编写一个父级 hover 选择器？

- user2344095

---

没有真正的父级选择器...你想做什么？ - Paulie_D

如果用户将鼠标悬停在父块上，则需要更改子元素的背景。我有不同文件中的父元素和子元素的样式，并希望像这样做相同的工作：&:hover & { - user2344095

这里是否需要使用@at-root？ - Paulie_D

Answer 1

如果我理解你的问题正确：https://jsfiddle.net/wx9L9jzj/3/ SCSS:

.parent {
  width: 200px;
  height: 200px;
}

.children {
  height: 100px;
  width: 100px;
  
  .is-active & {
    background: red;
  }
  
  :hover > & {
    background: blue;
  }
}

请注意:hover > & SCSS选择器，它基本上查看父节点以确定子节点是否在:hover伪类中。这不是标准的CSS语法，需要将SASS语法编译为标准的CSS，SASS通过重新编写选择器来完成这个过程。

根据SASS关于父（&）选择器的文档：

父选择器&是由Sass发明的特殊选择器，用于嵌套选择器中引用外部选择器。它使得可以以更复杂的方式重复使用外部选择器，比如添加伪类或在父级前添加选择器。

当一个父选择器在内部选择器中使用时，它会被替换为相应的外层选择器。这是代替正常嵌套行为发生的。

- jeffjenx

Answer 2

如果您想在scss中使用选择器来调用另一个类或伪元素，则必须使用&符号。

示例：

<div class="class-1 class-2"></div>

SASS

.class-1 {
    &.class-2 {
    }
}

这将编译以下CSS：

.class-1.class-2 {
}

要实现您所要求的功能，您需要按照以下步骤操作：

.parent {
    &:hover {
        .children {
            // write the desired CSS
        }
    }

    // for the active class you write
    &.is-active {
        .children {
            // desired CSS
        }
    }
}

当鼠标悬停时，运行代码。

- Ardian