SASS“&”和父选择器

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