[{"data":1,"prerenderedAt":248},["ShallowReactive",2],{"term-s\u002Fscss":3,"related-s\u002Fscss":233},{"id":4,"title":5,"acronym":6,"body":7,"category":215,"description":216,"difficulty":217,"extension":218,"letter":219,"meta":220,"navigation":110,"path":221,"related":222,"seo":227,"sitemap":228,"stem":231,"subcategory":6,"__hash__":232},"terms\u002Fterms\u002Fs\u002Fscss.md","SCSS",null,{"type":8,"value":9,"toc":209},"minimark",[10,15,19,23,26,30,198,202,205],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"SCSS is the syntax of Sass that looks like regular CSS but with superpowers added. Unlike the original Sass (which uses indentation like Python), SCSS uses curly braces and semicolons — so existing CSS is valid SCSS. It's the one everyone actually uses.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"SCSS (Sassy CSS) is the most widely used Sass syntax. It's a strict superset of CSS — any valid CSS is valid SCSS. It adds variables ($ prefix), nesting, mixins (@mixin \u002F @include), partials (@import\u002F@use), functions, and control flow. SCSS files are compiled to plain CSS by tools like Vite, webpack, or Dart Sass.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@mixin flex-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.hero {\n  @include flex-center;\n  min-height: 100vh;\n\n  h1 { font-size: clamp(2rem, 5vw, 4rem); }\n}\n","scss","",[38,39,40,57,74,87,99,105,112,124,134,148,153,193],"code",{"__ignoreMap":36},[41,42,45,49,53],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"s7zQu","@mixin",[41,50,52],{"class":51},"s2Zo4"," flex-center",[41,54,56],{"class":55},"sMK4o"," {\n",[41,58,60,64,67,71],{"class":43,"line":59},2,[41,61,63],{"class":62},"sqsOY","  display",[41,65,66],{"class":55},":",[41,68,70],{"class":69},"sTEyZ"," flex",[41,72,73],{"class":55},";\n",[41,75,77,80,82,85],{"class":43,"line":76},3,[41,78,79],{"class":62},"  justify-content",[41,81,66],{"class":55},[41,83,84],{"class":69}," center",[41,86,73],{"class":55},[41,88,90,93,95,97],{"class":43,"line":89},4,[41,91,92],{"class":62},"  align-items",[41,94,66],{"class":55},[41,96,84],{"class":69},[41,98,73],{"class":55},[41,100,102],{"class":43,"line":101},5,[41,103,104],{"class":55},"}\n",[41,106,108],{"class":43,"line":107},6,[41,109,111],{"emptyLinePlaceholder":110},true,"\n",[41,113,115,118,122],{"class":43,"line":114},7,[41,116,117],{"class":55},".",[41,119,121],{"class":120},"sBMFI","hero",[41,123,56],{"class":55},[41,125,127,130,132],{"class":43,"line":126},8,[41,128,129],{"class":47},"  @include",[41,131,52],{"class":51},[41,133,73],{"class":55},[41,135,137,140,142,146],{"class":43,"line":136},9,[41,138,139],{"class":62},"  min-height",[41,141,66],{"class":55},[41,143,145],{"class":144},"sbssI"," 100vh",[41,147,73],{"class":55},[41,149,151],{"class":43,"line":150},10,[41,152,111],{"emptyLinePlaceholder":110},[41,154,156,159,162,165,167,170,173,176,179,182,184,187,190],{"class":43,"line":155},11,[41,157,158],{"class":120},"  h1",[41,160,161],{"class":55}," {",[41,163,164],{"class":62}," font-size",[41,166,66],{"class":55},[41,168,169],{"class":51}," clamp",[41,171,172],{"class":55},"(",[41,174,175],{"class":144},"2rem",[41,177,178],{"class":55},",",[41,180,181],{"class":144}," 5vw",[41,183,178],{"class":55},[41,185,186],{"class":144}," 4rem",[41,188,189],{"class":55},");",[41,191,192],{"class":55}," }\n",[41,194,196],{"class":43,"line":195},12,[41,197,104],{"class":55},[11,199,201],{"id":200},"when-youll-hear-this","When You'll Hear This",[16,203,204],{},"\"We write SCSS and Vite compiles it to CSS at build time.\" \u002F \"SCSS files that start with _ are partials — they don't compile to their own CSS file.\"",[206,207,208],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":59,"depth":59,"links":210},[211,212,213,214],{"id":13,"depth":59,"text":14},{"id":21,"depth":59,"text":22},{"id":28,"depth":59,"text":29},{"id":200,"depth":59,"text":201},"frontend","SCSS is the syntax of Sass that looks like regular CSS but with superpowers added.","intermediate","md","s",{},"\u002Fterms\u002Fs\u002Fscss",[223,224,225,226],"Sass","CSS","CSS Variables","Tailwind",{"title":5,"description":216},{"changefreq":229,"priority":230},"weekly",0.7,"terms\u002Fs\u002Fscss","KfgwDTecTpPIC0tPoTStX0SCe1mjxaMjg4TRTqbnYos",[234,239,242,245],{"title":224,"path":235,"acronym":236,"category":215,"difficulty":237,"description":238},"\u002Fterms\u002Fc\u002Fcss","Cascading Style Sheets","beginner","CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.",{"title":225,"path":240,"acronym":6,"category":215,"difficulty":237,"description":241},"\u002Fterms\u002Fc\u002Fcss-variables","CSS Variables (officially called Custom Properties) let you store values in CSS and reuse them everywhere.",{"title":223,"path":243,"acronym":6,"category":215,"difficulty":217,"description":244},"\u002Fterms\u002Fs\u002Fsass","Sass is CSS with superpowers — variables, nesting, mixins, and functions that vanilla CSS didn't have for years.",{"title":226,"path":246,"acronym":6,"category":215,"difficulty":237,"description":247},"\u002Fterms\u002Ft\u002Ftailwind","Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.",1776518309606]