LESS CSS: abusing the & Operator when nesting?

Viewed 25157

Less uses the & Operator to enhance the possibilities for nesting.

.header        { color: black;
  .navigation  { font-size: 12px;
    &.class    { text-decoration: none }
  }
}

which causes a substitution of the & with the parent selector and results in a concatentation of the actual selector right to the parent selector: .header .navigation.class instead of the normal appending, which would result in .class being a decendant: .header .navigation .class.

Now what also is possible is the following (see also here):

.header        { color: black;
  .navigation  { font-size: 12px;
    #some-id & .foo   { text-decoration: none }
  }
}

which would result in the following: #some-id .header .navigation .foo try here . The substition takes place and i have prepended a selector (#some-id) to my parent selector.

Besides the fact that I would never code this way, since this probably messes up your stylesheet in no time, my question:

As this functionality is not documented, is it a feature or more likely a bug?
Which are possible side-effects?

2 Answers
Related