css - SCSS : parent hover selector

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;
  }
}

example

您将如何编写父级 hover 选择器？

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 documentation on the parent (&) selector :

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.

When a parent selector is used in an inner selector, it’s replaced with the corresponding outer selector. This happens instead of the normal nesting behavior.