较少扩展的根选择器

Question

我需要生成这样的CS：

header.is-sticky .menu nav > ul > li > a span {
    color: #555555;
}

我的较少代码看起来像TIHS：

header {
  .menu {
    nav {
      > ul > li {
        > a {
          span {
            .is-sticky & {
              color: #555555;
            }
          }
        }
      }
    }
  }
}

但是它是为错误的不需要结果生成的：

.is-sticky header .menu nav > ul > li > a span {
    color: #555555;
}

如何更改较少的脚本以生成所需的结果？

Answer 1

这是您的正确代码

.menu {
    nav {
      > ul > li {
        > a {
          span {
            header.is-sticky & {
              color: #555555;
            }
          }
        }
      }
    }
}

The output will be shown as you want

header.is-sticky .menu nav > ul > li > a span {
  color: #555555;
}