SASS“ Ampersand”和父选择器

Question

我想知道可以用＆符在Sass中做这样的事情（请参见下面的示例）。

请参见下面的示例。

.page-swup-2 {

    .page-surtitle {
        @include anim('opacity', 200ms, 500ms);
        opacity: 0;

        body.swup-animationInDone & {
            opacity: 1;
        }

    }

}

//实际结果

body.swup-animationInDone .page-swup-2 .page-surtitle {
  opacity: 1;
}

//预期结果

body.swup-animationInDone.page-swup-2 .page-surtitle {
  opacity: 1;
}

Answer 1

您可以将@at-root => https://sass-lang.com/documentation/at-rules/at-root和&用于插值语法：

.page-swup-2 {
    .page-surtitle {
        @at-root body.swup-animationInDone#{&} {
            opacity: 1;
        }
    }
}

您的新结果：

body.swup-animationInDone.page-swup-2 .page-surtitle {
  opacity: 1;
}