Frontend - sass nesting, .child{.parent & { }} invalid?

Question

<span ng-class="{'group-expand': isExpand}">
    <i class="icon-arrow-right"></i>
</span>

@mixin rotate($deg) {
  -webkit-transform: rotate($deg);
  -moz-transform: rotate($deg);
  -ms-transform: rotate($deg);
  -o-transform: rotate($deg);
  transform: rotate($deg);
}

//solution1
.icon-arrow-right {
    @include rotate(0deg);
    .expand & {
        @include rotate(90deg);
    }
}

//solution2
.icon-arrow-right {
    @include rotate(0deg);
}
.expand .icon-arrow-right {
    @include rotate(90deg);
}

Excuse me why solution1 is invalid?

Answer 1

Copy your code and the compilation is successful
Maybe it’s a version problem with your scss