Use @at-root in SCSS to break out of nesting

In SCSS, selectors can be deeply nested. In some situations you may want to break out of the current selector hierarchy and emit some styles at the root of the document. SCSS provides the @at-root rule for this use case:

/* styles.scss */
@mixin some-mixin() {
  color: black;

  @at-root body {
    background: lightgray;
  }
}

.some-class {
  @include some-mixin();
}

This will move body out of the parent selector:

/* styles.css */
.some-class {
  color: black;
}

body {
  background-color: lightgray;
}