Nesting

In plain CSS, styling a link inside a navbar means writing out .navbar and .navbar a as two completely separate rules. Sass lets you nest one selector inside another, so the relationship between them is visible directly in the code.

Basic nesting

.navbar {
  background: #10131c;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }
}

.navbar {
  background: #10131c;
}
.navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.navbar li {
  display: inline-block;
}

Sass takes each nested selector and prepends its parent to it, producing the same descendant-combinator CSS you'd write by hand — just without retyping .navbar for every rule underneath it.

The & parent selector

& stands in for the parent selector exactly where it's placed, which is what lets you reach pseudo-classes, pseudo-elements, and modifier classes without a space (a descendant combinator) being inserted:

.btn {
  padding: 8px 16px;
  background: #1b6ec2;

  &:hover {
    background: #145a9e;
  }

  &.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.btn {
  padding: 8px 16px;
  background: #1b6ec2;
}
.btn:hover {
  background: #145a9e;
}
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Without &, nesting :hover under .btn would compile to .btn :hover — a descendant selector matching hovered elements inside a button, which is almost never what you want. &:hover attaches directly, producing .btn:hover instead.

Nesting properties

Less commonly used, but Sass also lets you nest CSS properties that share a common prefix, like the various font-* properties:

.heading {
  font: {
    family: 'Space Grotesk', sans-serif;
    weight: 700;
    size: 2rem;
  }
}

.heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 2rem;
}