SCSS：父级悬停选择器

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

Answer 2

如果要使用scss调用选择器内的其他类或伪元素，则必须使用＆amp; 符号。

示例：

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

在悬停时工作fiddle。