[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-css-nesting-sass-replaced":32,"code:scss:true:y9izit":234,"code:css:true:udemqp":235,"code:css:true:10deg9u":236,"code:css:true:1em0deh":237,"code:css:true:1f5tosr":238},[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,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":65,"body":67,"bodyMd":218,"seo":219,"translationGroupId":221,"thread":222,"assessments":224,"translations":230,"quiz":232},"019fe65f-fe39-767c-9ce8-da4db5144b1d","css-nesting-sass-replaced","You kept Sass for one reason. Native CSS nesting just ended it.",null,"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",12,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"css","CSS",[52,54,57,60],{"slug":49,"name":53,"color":36},"Css",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"javascript","Javascript",{"assessments":64},1,{"slug":34,"title":66},"Native CSS nesting — interactive playground",{"blocks":68,"version":64},[69,73,76,81,84,90,93,96,100,103,106,109,112,115,118,121,124,127,130,134,137,141,144,147,151,154,157,160,163,166,169,173,176,179,182,185,188,191,194,197,200,203,206,209],{"id":70,"html":71,"type":72},"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":74,"html":75,"type":72},"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":77,"html":78,"text":79,"type":80,"level":31},"b3","What you've been writing in Sass","What you've been writing in Sass","heading",{"id":82,"html":83,"type":72},"b4","\u003Cp>The classic pattern — component styles scoped to a block, with states and modifiers nested inside:\u003C\u002Fp>",{"id":85,"code":86,"type":87,"language":88,"highlight":89},"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":91,"html":92,"type":72},"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":94,"html":95,"text":95,"type":80,"level":31},"b7","The same thing in native CSS",{"id":97,"code":98,"type":87,"language":49,"highlight":99},"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":101,"html":102,"type":72},"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":104,"html":105,"type":72},"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":107,"html":108,"type":72},"b11","\u003C!-- playground:start -->",{"id":110,"html":111,"text":111,"type":80,"level":31},"b12","🎮 Try it yourself",{"id":113,"html":114,"type":72},"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":116,"html":117,"type":72},"b14","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":119,"html":120,"type":72},"b15","\u003C!-- playground:end -->",{"id":122,"html":123,"text":123,"type":80,"level":31},"b16","Media queries nested inside their rules",{"id":125,"html":126,"type":72},"b17","\u003Cp>This is the feature that earns native nesting a permanent spot in how I write stylesheets.\u003C\u002Fp>",{"id":128,"html":129,"type":72},"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":131,"code":132,"type":87,"language":49,"highlight":133},"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":135,"html":136,"type":72},"b20","\u003Cp>With native nesting, the responsive rules live with the component they modify:\u003C\u002Fp>",{"id":138,"code":139,"type":87,"language":49,"highlight":140},"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":142,"html":143,"type":72},"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":145,"html":146,"type":72},"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":148,"html":149,"text":150,"type":80,"level":31},"b24","The one gotcha — \u003Ccode>&\u003C\u002Fcode> is not a string","The one gotcha — & is not a string",{"id":152,"html":153,"type":72},"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":155,"html":156,"type":72},"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":158,"html":159,"type":72},"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":161,"html":162,"text":162,"type":80,"level":31},"b28","Browser support — the honest picture",{"id":164,"html":165,"type":72},"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":167,"html":168,"type":72},"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":170,"code":171,"type":87,"language":49,"highlight":172},"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":174,"html":175,"type":72},"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":177,"html":178,"type":72},"b33","\u003C!-- quiz:start -->",{"id":180,"html":181,"text":181,"type":80,"level":31},"b34","🧠 Test yourself",{"id":183,"html":184,"type":72},"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":186,"html":187,"type":72},"b36","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":189,"html":190,"type":72},"b37","\u003C!-- quiz:end -->",{"id":192,"html":193,"text":193,"type":80,"level":31},"b38","What to do next",{"id":195,"html":196,"type":72},"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":198,"html":199,"type":72},"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":201,"html":202,"type":72},"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":204,"type":205},"b42","divider",{"id":207,"html":208,"type":72},"b43","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":210,"type":211,"items":212,"ordered":18},"b44","list",[213,214,215,216,217],"⭐ \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":35,"canonical":220,"description":37},"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fcss-nesting-sass-replaced","019fe65f-fe39-767c-9ce8-dfa1273ab2db",{"id":223,"locked":18},"019fe660-050c-7206-8f85-7ec3058493b4",[225],{"id":226,"slug":34,"title":227,"_count":228},"019fe776-2e03-71bd-90d5-544fd0312729","Native CSS nesting",{"questions":229},6,[231],{"locale":13,"slug":34},{"id":226,"slug":34,"title":227,"_count":233,"questionCount":229},{"questions":229},"\u003Cdiv class=\"shj shj-lang-scss shj-multiline\" data-lang=\"scss\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003Cdiv>14\u003C\u002Fdiv>\u003Cdiv>15\u003C\u002Fdiv>\u003Cdiv>16\u003C\u002Fdiv>\u003Cdiv>17\u003C\u002Fdiv>\u003Cdiv>18\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-class\">.card\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">padding\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.5\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">border-radius\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">0.5\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">--surface\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n  \u003Cspan class=\"shj-class\">&\u003C\u002Fspan>\u003Cspan class=\"shj-class\">:hover\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">--surface-hover\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n  \u003Cspan class=\"shj-class\">&__title\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.125\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n    \u003Cspan class=\"shj-var\">font-weight\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">600\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n  \u003Cspan class=\"shj-class\">&--featured\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">border\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">2\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan> \u003Cspan class=\"shj-num\">solid\u003C\u002Fspan> \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-var\">--accent\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003Cdiv>14\u003C\u002Fdiv>\u003Cdiv>15\u003C\u002Fdiv>\u003Cdiv>16\u003C\u002Fdiv>\u003Cdiv>17\u003C\u002Fdiv>\u003Cdiv>18\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">padding\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.5\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">border-radius\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">0.5\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-kwd\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-kwd\">surface\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n  &\u003Cspan class=\"shj-var\">:hover\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">surface-hover\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n  & \u003Cspan class=\"shj-var\">.card__title\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.125\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n    \u003Cspan class=\"shj-var\">font-weight\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">600\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n  &\u003Cspan class=\"shj-var\">.card--featured\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">border\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">2\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan> \u003Cspan class=\"shj-num\">solid\u003C\u002Fspan> \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">accent\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.hero\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.5\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">padding\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">2\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-cmnt\">\u002F* ... 200 lines later ... *\u002F\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">@media\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">min-width\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">768\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.hero\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">2.5\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n    \u003Cspan class=\"shj-var\">padding\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">4\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.hero\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.5\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">padding\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">2\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n\n  \u003Cspan class=\"shj-kwd\">@media\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">min-width\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">768\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">2.5\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n    \u003Cspan class=\"shj-var\">padding\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">4\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F* Both browsers parse the outer rule *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">padding\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1.5\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>;\n\n  \u003Cspan class=\"shj-cmnt\">\u002F* Older browsers skip this; newer ones apply it *\u002F\u003C\u002Fspan>\n  &\u003Cspan class=\"shj-var\">:hover\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">surface-hover\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]