代码之家  ›  专栏  ›  技术社区  ›  natevw

是否可以在较少的时间内取消嵌套(或重新嵌套)选择器块?

  •  0
  • natevw  · 技术社区  · 6 年前

    假设我有一些不太时髦的东西,比如:

    .some-context {
        .some-parent {
            .some-nav {
                a {
                    color: blue;
                    &.active { color: black; text-decoration: underline; }
                }
            }
        }
    }
    

    基本上,我们是以某种方式在一个特定的深层上下文中设置链接的样式。

    但现在我们有了 第二 需要相同链接样式的上下文。

    我知道我可以用 & 重复父选择器,但是否有方法“取消设置”父选择器?我不想重新使用/重新排列父选择器,而是希望 丢弃 它。

    (我用过 &:extend() 从另一个上下文中“窃取”页面其他部分的样式,但最终相当脆弱——每当其他代码/嵌套发生更改时,就会悄悄地中断。所以我在寻找其他选择。)

    有什么方法可以做到:

    // (deep within a nested context)
    a, ⅋ .other-context a {
     // …
    }
    

    无论实际的语法代表什么,都意味着“重置上下文并丢弃所有父选择器”?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Piotr Wicijowski    6 年前

    不幸的是,目前还不可能(截至2018年12月),但可以找到一个开放的github功能请求 here . 但是,如果您考虑切换到sass,那么可以使用 @at-root 指令。