css - 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;
}