[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"quiz-css-nesting-sass-replaced":32,"quiz-article-css-nesting-sass-replaced":48},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"kind":35,"title":36,"description":37,"config":38,"verticalId":5,"vertical":43,"course":40,"_count":44,"access":45,"attempts":47,"questionCount":39},"019fe776-2e03-71bd-90d5-544fd0312729","css-nesting-sass-replaced","PRACTICE_QUIZ","Native CSS nesting","Native CSS nesting replaced Sass's most-used feature, but & is a selector, not a string. Test whether you know what & really expands to, how nesting resolves without it, and where it quietly does nothing.",{"questionCount":39,"timeLimitSec":40,"shuffleQuestions":18,"shuffleOptions":17,"negativeMarking":19,"passScorePct":41,"maxAttempts":40,"revealAnswers":42,"allowFlagging":18,"allowBacktracking":17},6,null,70,"IMMEDIATE",{"slug":6,"name":7},{"questions":39},{"allowed":17,"reason":46},"FREE",[],{"id":49,"slug":34,"title":50,"subtitle":40,"excerpt":51,"coverUrl":52,"locale":13,"readingMinutes":53,"publishedAt":54,"viewCount":55,"likeCount":19,"commentCount":19,"author":56,"vertical":61,"topic":62,"tags":65,"_count":77,"playground":79,"body":81,"bodyMd":232,"seo":233,"translationGroupId":235,"thread":236,"assessments":238,"translations":241,"quiz":243},"019fe65f-fe39-767c-9ce8-da4db5144b1d","You kept Sass for one reason. Native CSS nesting just ended it.","CSS has supported nesting natively since 2023 — pseudo-classes, pseudo-elements, and @media queries nested inside the rules they belong to. No compiler required.","\u002Fmedia\u002Fcovers\u002Fcss-nesting-sass-replaced.png",4,"2026-07-09T09:48:41.505Z",11,{"id":57,"name":58,"username":59,"avatarUrl":40,"headline":60},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},"css","CSS",[66,68,71,74],{"slug":63,"name":67,"color":40},"Css",{"slug":69,"name":70,"color":40},"webdev","Webdev",{"slug":72,"name":73,"color":40},"frontend","Frontend",{"slug":75,"name":76,"color":40},"javascript","Javascript",{"assessments":78},1,{"slug":34,"title":80},"Native CSS nesting — interactive playground",{"blocks":82,"version":78},[83,87,90,95,98,104,107,110,114,117,120,123,126,129,132,135,138,141,144,148,151,155,158,161,165,168,171,174,177,180,183,187,190,193,196,199,202,205,208,211,214,217,220,223],{"id":84,"html":85,"type":86},"b1","\u003Cp>There's a project on every developer's machine that has Sass installed for one reason: \u003Ccode>&:hover {}\u003C\u002Fcode>. Not \u003Ccode>@mixin\u003C\u002Fcode>. Not \u003Ccode>@each\u003C\u002Fcode>. Just the nesting. The variables long since became \u003Ccode>--custom-properties\u003C\u002Fcode>. The only thing still justifying \u003Ccode>node_modules\u002Fsass\u003C\u002Fcode> is the ability to write child selectors inside parent rules.\u003C\u002Fp>","paragraph",{"id":88,"html":89,"type":86},"b2","\u003Cp>CSS added that natively in 2023. It shipped in Chrome 112, Firefox 117, and Safari 16.5 — every major browser released in the last two years. The compiler is not earning its spot anymore.\u003C\u002Fp>",{"id":91,"html":92,"text":93,"type":94,"level":31},"b3","What you've been writing in Sass","What you've been writing in Sass","heading",{"id":96,"html":97,"type":86},"b4","\u003Cp>The classic pattern — component styles scoped to a block, with states and modifiers nested inside:\u003C\u002Fp>",{"id":99,"code":100,"type":101,"language":102,"highlight":103},"b5",".card {\n  padding: 1.5rem;\n  border-radius: 0.5rem;\n  background: var(--surface);\n\n  &:hover {\n    background: var(--surface-hover);\n  }\n\n  &__title {\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  &--featured {\n    border: 2px solid var(--accent);\n  }\n}","code","scss",[],{"id":105,"html":106,"type":86},"b6","\u003Cp>The output is flat, specificity-controlled CSS. The source is organized by component. That's the trade Sass nesting has always offered — and native CSS now offers the same deal.\u003C\u002Fp>",{"id":108,"html":109,"text":109,"type":94,"level":31},"b7","The same thing in native CSS",{"id":111,"code":112,"type":101,"language":63,"highlight":113},"b8",".card {\n  padding: 1.5rem;\n  border-radius: 0.5rem;\n  background: var(--surface);\n\n  &:hover {\n    background: var(--surface-hover);\n  }\n\n  & .card__title {\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  &.card--featured {\n    border: 2px solid var(--accent);\n  }\n}",[],{"id":115,"html":116,"type":86},"b9","\u003Cp>Two differences are worth noticing. First: pseudo-classes work exactly as in Sass — \u003Ccode>&:hover\u003C\u002Fcode> resolves to \u003Ccode>.card:hover\u003C\u002Fcode> with no extra syntax. Second: descendant selectors require an explicit \u003Ccode>&\u003C\u002Fcode> followed by a space. \u003Ccode>& .card__title\u003C\u002Fcode> becomes \u003Ccode>.card .card__title\u003C\u002Fcode>. This is where native nesting differs from BEM's \u003Ccode>__\u003C\u002Fcode>\u002F\u003Ccode>--\u003C\u002Fcode> convention: in native CSS, \u003Ccode>&\u003C\u002Fcode> is a \u003Cem>selector reference\u003C\u002Fem>, not a string concatenation operator.\u003C\u002Fp>",{"id":118,"html":119,"type":86},"b10","\u003Cp>If you're using BEM naming heavily, \u003Ccode>&__foo\u003C\u002Fcode> becomes \u003Ccode>& .block__foo\u003C\u002Fcode>. The compiled output is identical; the source is slightly more explicit about what's happening.\u003C\u002Fp>",{"id":121,"html":122,"type":86},"b11","\u003C!-- playground:start -->",{"id":124,"html":125,"text":125,"type":94,"level":31},"b12","🎮 Try it yourself",{"id":127,"html":128,"type":86},"b13","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-09-css-nesting-sass-replaced\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":130,"html":131,"type":86},"b14","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":133,"html":134,"type":86},"b15","\u003C!-- playground:end -->",{"id":136,"html":137,"text":137,"type":94,"level":31},"b16","Media queries nested inside their rules",{"id":139,"html":140,"type":86},"b17","\u003Cp>This is the feature that earns native nesting a permanent spot in how I write stylesheets.\u003C\u002Fp>",{"id":142,"html":143,"type":86},"b18","\u003Cp>Before, responsive CSS meant jumping between two locations in the same file — the base rule near the top and the \u003Ccode>@media\u003C\u002Fcode> block somewhere below it, often hundreds of lines away:\u003C\u002Fp>",{"id":145,"code":146,"type":101,"language":63,"highlight":147},"b19",".hero {\n  font-size: 1.5rem;\n  padding: 2rem;\n}\n\n\u002F* ... 200 lines later ... *\u002F\n\n@media (min-width: 768px) {\n  .hero {\n    font-size: 2.5rem;\n    padding: 4rem;\n  }\n}",[],{"id":149,"html":150,"type":86},"b20","\u003Cp>With native nesting, the responsive rules live with the component they modify:\u003C\u002Fp>",{"id":152,"code":153,"type":101,"language":63,"highlight":154},"b21",".hero {\n  font-size: 1.5rem;\n  padding: 2rem;\n\n  @media (min-width: 768px) {\n    font-size: 2.5rem;\n    padding: 4rem;\n  }\n}",[],{"id":156,"html":157,"type":86},"b22","\u003Cp>Reading an unfamiliar stylesheet gets faster. Instead of tracing a component across multiple \u003Ccode>@media\u003C\u002Fcode> blocks, all its states are in one place. You see what it looks like at every breakpoint without scrolling past unrelated rules.\u003C\u002Fp>",{"id":159,"html":160,"type":86},"b23","\u003Cp>Sass could nest \u003Ccode>@media\u003C\u002Fcode> queries this way too — but only by compiling them back out to separate blocks. Native CSS parses nested \u003Ccode>@media\u003C\u002Fcode> directly. No output transformation, no source map needed to trace back.\u003C\u002Fp>",{"id":162,"html":163,"text":164,"type":94,"level":31},"b24","The one gotcha — \u003Ccode>&\u003C\u002Fcode> is not a string","The one gotcha — & is not a string",{"id":166,"html":167,"type":86},"b25","\u003Cp>In Sass, \u003Ccode>&\u003C\u002Fcode> is a string that gets concatenated. \u003Ccode>&__child\u003C\u002Fcode> produces \u003Ccode>.card__child\u003C\u002Fcode>. That's why BEM's double-underscore syntax worked so cleanly: the ampersand literally builds the class name character by character.\u003C\u002Fp>",{"id":169,"html":170,"type":86},"b26","\u003Cp>In native CSS, \u003Ccode>&\u003C\u002Fcode> is a selector. It means "the selector that contains this rule," and the browser uses it for matching, not text-building. So \u003Ccode>&__child\u003C\u002Fcode> doesn't produce \u003Ccode>.card__child\u003C\u002Fcode> — the parser sees it as \u003Ccode>&\u003C\u002Fcode> (a valid selector ref) followed by \u003Ccode>__child\u003C\u002Fcode> (an unknown pseudo-class-like token) and ignores the rule silently.\u003C\u002Fp>",{"id":172,"html":173,"type":86},"b27","\u003Cp>The fix is mechanical: everywhere you have \u003Ccode>&__element\u003C\u002Fcode>, write \u003Ccode>& .block__element\u003C\u002Fcode>. Everywhere you have \u003Ccode>&--modifier\u003C\u002Fcode>, write \u003Ccode>&.block--modifier\u003C\u002Fcode> (no space, modifier is on the same element). The specificity and the rendered output are identical. The migration is a find-and-replace once you know the pattern to look for.\u003C\u002Fp>",{"id":175,"html":176,"text":176,"type":94,"level":31},"b28","Browser support — the honest picture",{"id":178,"html":179,"type":86},"b29","\u003Cp>Chrome 112 (April 2023), Firefox 117 (August 2023), Safari 16.5 (May 2023). That's Baseline 2023: cross-browser in any browser released in the past two years.\u003C\u002Fp>",{"id":181,"html":182,"type":86},"b30","\u003Cp>For projects that still need to cover older browsers, native nesting degrades safely — unknown nested rules are silently skipped, so the outer rule's styles still apply:\u003C\u002Fp>",{"id":184,"code":185,"type":101,"language":63,"highlight":186},"b31","\u002F* Both browsers parse the outer rule *\u002F\n.card {\n  padding: 1.5rem;\n\n  \u002F* Older browsers skip this; newer ones apply it *\u002F\n  &:hover {\n    background: var(--surface-hover);\n  }\n}",[],{"id":188,"html":189,"type":86},"b32","\u003Cp>The progressive-enhancement story is the same one container queries, scroll-driven animations, and \u003Ccode>@layer\u003C\u002Fcode> all tell: declare it, get the enhancement in modern browsers, get the safe fallback in older ones.\u003C\u002Fp>",{"id":191,"html":192,"type":86},"b33","\u003C!-- quiz:start -->",{"id":194,"html":195,"text":195,"type":94,"level":31},"b34","🧠 Test yourself",{"id":197,"html":198,"type":86},"b35","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-09-css-nesting-sass-replaced\">Take the 6-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":200,"html":201,"type":86},"b36","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":203,"html":204,"type":86},"b37","\u003C!-- quiz:end -->",{"id":206,"html":207,"text":207,"type":94,"level":31},"b38","What to do next",{"id":209,"html":210,"type":86},"b39","\u003Cp>Open the project with Sass installed. Check whether you use anything beyond nesting: \u003Ccode>@mixin\u003C\u002Fcode>, \u003Ccode>@each\u003C\u002Fcode>, \u003Ccode>@function\u003C\u002Fcode>, \u003Ccode>@use\u003C\u002Fcode>. If the answer is no — just nesting — you have a straightforward migration. Rename \u003Ccode>.scss\u003C\u002Fcode> files to \u003Ccode>.css\u003C\u002Fcode>, change \u003Ccode>&__child\u003C\u002Fcode> patterns to \u003Ccode>& .child\u003C\u002Fcode>, remove the build step.\u003C\u002Fp>",{"id":212,"html":213,"type":86},"b40","\u003Cp>The loop is usually shorter than expected. Two file renames, a find-and-replace, one fewer \u003Ccode>devDependency\u003C\u002Fcode>. The styles work the same way; the pipeline gets simpler.\u003C\u002Fp>",{"id":215,"html":216,"type":86},"b41","\u003Cp>What Sass feature are you genuinely still relying on? Because the list gets shorter every year. Nesting was the last one most projects could point to — and it just moved to the platform.\u003C\u002Fp>",{"id":218,"type":219},"b42","divider",{"id":221,"html":222,"type":86},"b43","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":224,"type":225,"items":226,"ordered":18},"b44","list",[227,228,229,230,231],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","There's a project on every developer's machine that has Sass installed for one reason: `&:hover {}`. Not `@mixin`. Not `@each`. Just the nesting. The variables long since became `--custom-properties`. The only thing still justifying `node_modules\u002Fsass` is the ability to write child selectors inside parent rules.\n\nCSS added that natively in 2023. It shipped in Chrome 112, Firefox 117, and Safari 16.5 — every major browser released in the last two years. The compiler is not earning its spot anymore.\n\n## What you've been writing in Sass\n\nThe classic pattern — component styles scoped to a block, with states and modifiers nested inside:\n\n```scss\n.card {\n  padding: 1.5rem;\n  border-radius: 0.5rem;\n  background: var(--surface);\n\n  &:hover {\n    background: var(--surface-hover);\n  }\n\n  &__title {\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  &--featured {\n    border: 2px solid var(--accent);\n  }\n}\n```\n\nThe output is flat, specificity-controlled CSS. The source is organized by component. That's the trade Sass nesting has always offered — and native CSS now offers the same deal.\n\n## The same thing in native CSS\n\n```css\n.card {\n  padding: 1.5rem;\n  border-radius: 0.5rem;\n  background: var(--surface);\n\n  &:hover {\n    background: var(--surface-hover);\n  }\n\n  & .card__title {\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  &.card--featured {\n    border: 2px solid var(--accent);\n  }\n}\n```\n\nTwo differences are worth noticing. First: pseudo-classes work exactly as in Sass — `&:hover` resolves to `.card:hover` with no extra syntax. Second: descendant selectors require an explicit `&` followed by a space. `& .card__title` becomes `.card .card__title`. This is where native nesting differs from BEM's `__`\u002F`--` convention: in native CSS, `&` is a *selector reference*, not a string concatenation operator.\n\nIf you're using BEM naming heavily, `&__foo` becomes `& .block__foo`. The compiled output is identical; the source is slightly more explicit about what's happening.\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-09-css-nesting-sass-replaced\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n## Media queries nested inside their rules\n\nThis is the feature that earns native nesting a permanent spot in how I write stylesheets.\n\nBefore, responsive CSS meant jumping between two locations in the same file — the base rule near the top and the `@media` block somewhere below it, often hundreds of lines away:\n\n```css\n.hero {\n  font-size: 1.5rem;\n  padding: 2rem;\n}\n\n\u002F* ... 200 lines later ... *\u002F\n\n@media (min-width: 768px) {\n  .hero {\n    font-size: 2.5rem;\n    padding: 4rem;\n  }\n}\n```\n\nWith native nesting, the responsive rules live with the component they modify:\n\n```css\n.hero {\n  font-size: 1.5rem;\n  padding: 2rem;\n\n  @media (min-width: 768px) {\n    font-size: 2.5rem;\n    padding: 4rem;\n  }\n}\n```\n\nReading an unfamiliar stylesheet gets faster. Instead of tracing a component across multiple `@media` blocks, all its states are in one place. You see what it looks like at every breakpoint without scrolling past unrelated rules.\n\nSass could nest `@media` queries this way too — but only by compiling them back out to separate blocks. Native CSS parses nested `@media` directly. No output transformation, no source map needed to trace back.\n\n## The one gotcha — `&` is not a string\n\nIn Sass, `&` is a string that gets concatenated. `&__child` produces `.card__child`. That's why BEM's double-underscore syntax worked so cleanly: the ampersand literally builds the class name character by character.\n\nIn native CSS, `&` is a selector. It means \"the selector that contains this rule,\" and the browser uses it for matching, not text-building. So `&__child` doesn't produce `.card__child` — the parser sees it as `&` (a valid selector ref) followed by `__child` (an unknown pseudo-class-like token) and ignores the rule silently.\n\nThe fix is mechanical: everywhere you have `&__element`, write `& .block__element`. Everywhere you have `&--modifier`, write `&.block--modifier` (no space, modifier is on the same element). The specificity and the rendered output are identical. The migration is a find-and-replace once you know the pattern to look for.\n\n## Browser support — the honest picture\n\nChrome 112 (April 2023), Firefox 117 (August 2023), Safari 16.5 (May 2023). That's Baseline 2023: cross-browser in any browser released in the past two years.\n\nFor projects that still need to cover older browsers, native nesting degrades safely — unknown nested rules are silently skipped, so the outer rule's styles still apply:\n\n```css\n\u002F* Both browsers parse the outer rule *\u002F\n.card {\n  padding: 1.5rem;\n\n  \u002F* Older browsers skip this; newer ones apply it *\u002F\n  &:hover {\n    background: var(--surface-hover);\n  }\n}\n```\n\nThe progressive-enhancement story is the same one container queries, scroll-driven animations, and `@layer` all tell: declare it, get the enhancement in modern browsers, get the safe fallback in older ones.\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 6-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-09-css-nesting-sass-replaced)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n\n## What to do next\n\nOpen the project with Sass installed. Check whether you use anything beyond nesting: `@mixin`, `@each`, `@function`, `@use`. If the answer is no — just nesting — you have a straightforward migration. Rename `.scss` files to `.css`, change `&__child` patterns to `& .child`, remove the build step.\n\nThe loop is usually shorter than expected. Two file renames, a find-and-replace, one fewer `devDependency`. The styles work the same way; the pipeline gets simpler.\n\nWhat Sass feature are you genuinely still relying on? Because the list gets shorter every year. Nesting was the last one most projects could point to — and it just moved to the platform.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":50,"canonical":234,"description":51},"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fcss-nesting-sass-replaced","019fe65f-fe39-767c-9ce8-dfa1273ab2db",{"id":237,"locked":18},"019fe660-050c-7206-8f85-7ec3058493b4",[239],{"id":33,"slug":34,"title":36,"_count":240},{"questions":39},[242],{"locale":13,"slug":34},{"id":33,"slug":34,"title":36,"_count":244,"questionCount":39},{"questions":39}]