关于less &&符号的继承小问题

.content{
	.content-color{
    color: #fff;
    &&-red{
      color: red;
    }
  }
}

对于常用less &&符号的我来说，结果出乎意料 ，下面是css转换结果 css结果

.content .content-color {
  color: #fff;
}
.content .content-color.content .content-color-red {
  color: red;
}

这个&&不应该代表.color.color吗，为什么第二个&变成了.content，然而，如果你是这样

.content{
	&-color{
    color: #fff;
    &&-red{
      color: red;
    }
  }
}

那么得到结果

.content-color {
  color: #fff;
}
.content-color.content-color-red {
  color: red;
}

这个&就成功的变成了color。 下面我们追踪一下，从上面我们可以发现，这里有一个很大的区别，第一级不再作为前缀了。第一个是解析.content .content-color,而第二个解析出来的是.content-color，这就是&符号带来的最大改变。 当你使用了&-color之后，你下级出现的连续&符号的的第二个&符号，就会变成这个玩意儿，而当你下级类名没有再使用&，那么继承也就断了，&符号还是代表上一个继承的地方的类名，也就是说，连续&符号的第二个&的意义就是继承的类名，如果都没有，那就是顶级类名

.content {
  &-color {
    color: #fff;
    .content-color-f {
      color: #fff;
      &&-red {
        color: red;
      }
    }
  }
}

.content-color {
  color: #fff;
}
.content-color .content-color-f {
  color: #fff;
}
// 这个content-color就是继承截止，&的意义
.content-color .content-color-f.content-color .content-color-f-red {
  color: red;
}