I need generate css like this:

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

My LESS code looks like tihs:

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

But it is generated to this wrong unwanted result:

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

How to change LESS script to generate required result?

CodePudding user response：

Here is your correct code

.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;
}