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无法做到这一点。

这种情况是延伸真正闪耀的地方：

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

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

1 个答案: