Sass Nesting

How it works

A nested style rule normally combines its selector with the outside selector. That can reduce repetition, but every level still creates real CSS selectors and specificity. Prefer a small nesting depth and avoid tying a reusable component to the whole page structure.

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 nesting.scss nesting.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

nesting.scss

Download nesting.scss — save at the shown relative path.

.screening-card {
  padding: 16px;
  .title {
    margin: 0;
  }
}

Expected CSS

.screening-card {
  padding: 16px;
}
.screening-card .title {
  margin: 0;
}

The title rule matches a descendant title inside the card; it does not rename the title class. Read the generated selector as part of code review. Native CSS nesting has its own browser rules, so Sass nesting and browser nesting are not automatically interchangeable in every edge case.

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