Break out of Sass Nesting

Sometimes you might want to use Sass nesting to couple certain styling together. But you might also want to break out of the nesting and style some parent element in addition. For example, you might have a nav element that also requires some styling on the body. You could do that using body{} nav{}. But that does not make their relation explicit while nesting could help with that. In order to use nesting but still apply styling to elements outside of the nested element selectors, you can use @at-root.

The @at-root rule [...] causes everything within it to be emitted at the root of the document instead of using the normal nesting.
— Sass

nav {
  // styling for nav
  
  @at-root body {
    // styling for body
  }
}