0

只是关于 SASS 选择器嵌套的问题，所以我在一个嵌套跨度内，我想将:hover伪应用到以便不透明度更改为 0，尽管当父标签获取 class 时，我也想使用这种样式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;
            }
        }
    }
}
4

1 回答 1

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 */
}
于 2013-04-12T17:34:21.047 回答