Sass At Root

How it works

@at-root changes where rules are emitted in relation to surrounding rules. It can help a generator produce a sibling component instead of an accidental descendant. It also has query forms for controlling which surrounding at-rules remain; those should be reviewed carefully instead of used as a universal escape hatch.

Run the code

Use Dart Sass 1.107.0 in a separate learning folder. Install Node.js, then run npm install --save-dev --save-exact sass@1.107.0. Save every file below with its shown path. Run npx sass at-root.scss at-root.css --no-source-map from that folder. Browsers receive compiled CSS, not Sass.

The existing Sass playground uses legacy LibSass 3.6.2 and cannot run modern modules. The compiled CSS preview uses the isolated HTML/CSS editor; it does not compile Sass online. Preloading does not execute the preview. Apache, MySQL and PHP are not required.

Example

at-root.scss

Download at-root.scss — save at the shown relative path.

.programme {
  color: #0f3464;
  @at-root .screening-card {
    padding: 16px;
  }
}

Expected CSS

.programme {
  color: #0f3464;
}
.screening-card {
  padding: 16px;
}

The card rule is emitted at the top level rather than as .programme .screening-card. The source still groups the authoring operation near its context, which can be helpful or confusing depending on the generator.

Preview compiled CSS — choose Run code. Change and compile Sass locally first.