What is nesting in preprocessors?

Frontend ToolsJunior~1 min read

Nesting in preprocessors is the ability to write selectors as a hierarchy that reflects the HTML structure, instead of repeating the full selector path every time. Nested syntax makes code more compact, more logical and easier to read.

What this looks like in SCSS

scss

.card {
  padding: 20px;

  .title {
    font-size: 18px;
  }

  .btn {
    color: red;
  }
}

What this turns into after compilation

css

.card {
  padding: 20px;
}

.card .title {
  font-size: 18px;
}

.card .btn {
  color: red;
}

Key points of nesting

selectors are grouped by meaning: everything related to .card sits together;
duplication decreases, because you do not have to write .card .title, .card .btn manually;
the structure of the styles starts to visually match the structure of the DOM.

Nesting is one of the most noticeable conveniences of preprocessors, and it makes styles cleaner and more organized in large projects.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What is nesting in preprocessors?

#What this looks like in SCSS

#What this turns into after compilation

#Key points of nesting

Short Answer

What this looks like in SCSS

What this turns into after compilation

Key points of nesting