是否可以将嵌套的 SASS 选择器遍历到父选择器？ [复制]

Question

只是一个关于 SASS 选择器嵌套的问题，所以我在一个嵌套跨度内，我想将 :hover 伪应用到以便不透明度更改为 0，我也想使用这种样式虽然当父标签获取课程is-active。现在我会将is-active 类移到跨度之外并重新应用该样式，但我想知道您能否像遍历一样从嵌套样式中上移一个级别？

我的 SASS 示例：

.btn-lang {
    // styles...

    > span {
        // styles...

        &:hover { // i want to use this when btn-lang  has class is-active
            opacity: 0;
        }
    }

    // right now I would add these styles here but seems there could be an easier method?
    &.is-active {
        > span {
            &:hover {
                opacity: 0;
            }
        }
    }
}

Answer 1

您希望在一个构造中重用两个选择器（.btn-lang 和 span）。这在 SASS 中是不可能的。

这种情况是extends真正大放异彩的地方：

// Declaring a reusable extend that will not appear in CSS by itself.
%span-with-hover-on-active-element {
    & > span {
        /* styles for span under btn-lang */ }
    &.is-active > span:hover {
        opacity: 0; } }

.btn-lang {
    /* styles for btn-lang */
    // Apply the span-on-hover thing.
    @extend %span-with-hover-on-active-element; }  

它使复杂的代码可重用且更易于阅读。

生成的 CSS：

.btn-lang > span {
  /* styles for span under btn-lang */
}
.is-active.btn-lang > span:hover {
  opacity: 0;
}

.btn-lang {
  /* styles for btn-lang */
}