SCSS:父悬停选择器 [英] SCSS: parent hover selector

问题描述

在 scss 中，我们可以使用父选择器类:

In scss we can use a parent selector class:

<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 选择器?

How would you write a parent hover selector?

推荐答案

如果我正确理解了您的问题: https://jsfiddle.net/wx9L9jzj/3/

If I understand your question correctly: 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会通过重写选择器来做到这一点.

Note the :hover > & SCSS selector that essentially looks at the parent node to determine if the child was within a :hover pseudo-class. This is not standard CSS and requires the SASS syntax to be compiled to standard CSS, which SASS does by rewriting the selector.

每个有关父(&)选择器的SASS文档:

Per SASS documentation on the parent (&) selector:

父选择器&是Sass发明的特殊选择器，用于嵌套选择器中以引用外部选择器.这样就可以以更复杂的方式重用外部选择器，例如在其父级之前添加一个伪类或添加一个选择器.

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.

这篇关于SCSS:父悬停选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！