search

Home  >  Q&A  >  body text

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

<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?

迷茫迷茫2814 days ago498

reply all(1)I'll reply

  • 怪我咯

    怪我咯2017-05-15 17:01:45

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

    reply
    0
  • Cancelreply