Nesting and the & selector

Nesting means writing rules for child elements inside the parent's rule. Sass turns nested rules into ordinary flat selectors. This keeps all styles of one component — a card, a button — in one block.

Nested rules

A rule inside another rule applies to descendants, as if the selectors were joined with a space. For now all examples go into styles/main.scss; the chapter about files splits them up:

// styles/main.scss
.card {
  padding: 16px;
 
  h3 {
    margin: 0;
  }
 
  p {
    color: gray;
  }
}

.card {
  padding: 16px;
}
.card h3 {
  margin: 0;
}
.card p {
  color: gray;
}

The parent selector &

The & sign stands for the parent selector. With it you attach states and classes to the parent itself instead of looking for descendants:

// styles/main.scss
.btn {
  background: #2563eb;
 
  &:hover {
    background: #1d4ed8;
  }
 
  &.is-active {
    outline: 2px solid black;
  }
}

.btn {
  background: #2563eb;
}
.btn:hover {
  background: #1d4ed8;
}
.btn.is-active {
  outline: 2px solid black;
}

Without &, :hover would become .btn :hover — the hover of any element inside the button.

Suffixes for class names

In Sass & can be glued to text to build a new class name. This is handy for the BEM naming style, where elements and modifiers share the block name:

// styles/main.scss
.card {
  padding: 16px;
 
  &__title {
    font-size: 20px;
  }
 
  &--featured {
    border: 2px solid gold;
  }
}

.card {
  padding: 16px;
}
.card__title {
  font-size: 20px;
}
.card--featured {
  border: 2px solid gold;
}

<style>
  .card {
    padding: 16px;
  }
  .card__title {
    font-size: 20px;
  }
  .card--featured {
    border: 2px solid gold;
  }
</style>
 
<div class="card card--featured">
  <h3 class="card__title">Featured card</h3>
</div>

Native CSS nesting cannot do this: in CSS &__title is not allowed. This is one of the reasons to keep Sass.

Nested media queries

A media query can be written right inside a rule. Sass moves it outside and repeats the selector:

// styles/main.scss
.card {
  padding: 16px;
 
  @media (min-width: 768px) {
    padding: 32px;
  }
}

.card {
  padding: 16px;
}
@media (min-width: 768px) {
  .card {
    padding: 32px;
  }
}

Sass nesting and CSS nesting

Native nesting from the HTML & CSS tutorial works in browsers since 2023 and is fine for simple cases. Sass nesting is compiled into flat selectors, so it works in every browser and supports suffixes like &__title. If your project already uses Sass, use its nesting — mixing both styles in one file only confuses.

Common mistake

Deep nesting copies the HTML structure into the CSS and creates long, heavy selectors:

// styles/main.scss
.page {
  .content {
    .card {
      .title {
        color: navy;
      }
    }
  }
}

.page .content .card .title {
  color: navy;
}

Such a rule breaks as soon as the markup changes, and it is hard to override. Keep nesting to two or three levels and give elements their own classes.