Suggest an editImprove this articleRefine the answer for “What is nesting in preprocessors?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**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. **Key point:** nested syntax makes code more compact, more logical and easier to read.Shown above the full answer for quick recall.Answer (EN)ImageNesting 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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.