[{"data":1,"prerenderedAt":284},["ShallowReactive",2],{"term-s\u002Fsass":3,"related-s\u002Fsass":269},{"id":4,"title":5,"acronym":6,"body":7,"category":251,"description":252,"difficulty":253,"extension":254,"letter":255,"meta":256,"navigation":88,"path":257,"related":258,"seo":263,"sitemap":264,"stem":267,"subcategory":6,"__hash__":268},"terms\u002Fterms\u002Fs\u002Fsass.md","Sass",null,{"type":8,"value":9,"toc":245},"minimark",[10,15,19,23,26,30,234,238,241],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Sass is CSS with superpowers — variables, nesting, mixins, and functions that vanilla CSS didn't have for years. You write Sass and it compiles down to regular CSS. These days CSS Variables have caught up a lot, but Sass is still popular for large codebases.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that extends CSS with variables, nesting, partials, mixins, functions, and inheritance. It compiles to standard CSS. Sass comes in two syntaxes: the indented Sass syntax and the more popular SCSS (CSS-like) syntax.",[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","\u002F\u002F Sass variables and nesting\n$primary: #3b82f6;\n$radius: 8px;\n\n.card {\n  border-radius: $radius;\n  background: white;\n\n  &:hover {\n    background: lighten($primary, 40%);\n  }\n\n  .card__title {\n    color: $primary;\n    font-size: 1.5rem;\n  }\n}\n","scss","",[38,39,40,49,69,83,90,103,117,130,135,149,175,181,186,197,210,223,228],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Sass variables and nesting\n",[41,50,52,56,60,63,66],{"class":43,"line":51},2,[41,53,55],{"class":54},"sTEyZ","$primary",[41,57,59],{"class":58},"sMK4o",":",[41,61,62],{"class":58}," #",[41,64,65],{"class":54},"3b82f6",[41,67,68],{"class":58},";\n",[41,70,72,75,77,81],{"class":43,"line":71},3,[41,73,74],{"class":54},"$radius",[41,76,59],{"class":58},[41,78,80],{"class":79},"sbssI"," 8px",[41,82,68],{"class":58},[41,84,86],{"class":43,"line":85},4,[41,87,89],{"emptyLinePlaceholder":88},true,"\n",[41,91,93,96,100],{"class":43,"line":92},5,[41,94,95],{"class":58},".",[41,97,99],{"class":98},"sBMFI","card",[41,101,102],{"class":58}," {\n",[41,104,106,110,112,115],{"class":43,"line":105},6,[41,107,109],{"class":108},"sqsOY","  border-radius",[41,111,59],{"class":58},[41,113,114],{"class":54}," $radius",[41,116,68],{"class":58},[41,118,120,123,125,128],{"class":43,"line":119},7,[41,121,122],{"class":108},"  background",[41,124,59],{"class":58},[41,126,127],{"class":54}," white",[41,129,68],{"class":58},[41,131,133],{"class":43,"line":132},8,[41,134,89],{"emptyLinePlaceholder":88},[41,136,138,141,143,147],{"class":43,"line":137},9,[41,139,140],{"class":98},"  &",[41,142,59],{"class":58},[41,144,146],{"class":145},"spNyl","hover",[41,148,102],{"class":58},[41,150,152,155,157,161,164,166,169,172],{"class":43,"line":151},10,[41,153,154],{"class":108},"    background",[41,156,59],{"class":58},[41,158,160],{"class":159},"s2Zo4"," lighten",[41,162,163],{"class":58},"(",[41,165,55],{"class":54},[41,167,168],{"class":58},",",[41,170,171],{"class":79}," 40%",[41,173,174],{"class":58},");\n",[41,176,178],{"class":43,"line":177},11,[41,179,180],{"class":58},"  }\n",[41,182,184],{"class":43,"line":183},12,[41,185,89],{"emptyLinePlaceholder":88},[41,187,189,192,195],{"class":43,"line":188},13,[41,190,191],{"class":58},"  .",[41,193,194],{"class":98},"card__title",[41,196,102],{"class":58},[41,198,200,203,205,208],{"class":43,"line":199},14,[41,201,202],{"class":108},"    color",[41,204,59],{"class":58},[41,206,207],{"class":54}," $primary",[41,209,68],{"class":58},[41,211,213,216,218,221],{"class":43,"line":212},15,[41,214,215],{"class":108},"    font-size",[41,217,59],{"class":58},[41,219,220],{"class":79}," 1.5rem",[41,222,68],{"class":58},[41,224,226],{"class":43,"line":225},16,[41,227,180],{"class":58},[41,229,231],{"class":43,"line":230},17,[41,232,233],{"class":58},"}\n",[11,235,237],{"id":236},"when-youll-hear-this","When You'll Hear This",[16,239,240],{},"\"The project uses Sass for variables and nesting.\" \u002F \"Sass is less necessary now that CSS has native variables and nesting.\"",[242,243,244],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":51,"depth":51,"links":246},[247,248,249,250],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":236,"depth":51,"text":237},"frontend","Sass is CSS with superpowers — variables, nesting, mixins, and functions that vanilla CSS didn't have for years.","intermediate","md","s",{},"\u002Fterms\u002Fs\u002Fsass",[259,260,261,262],"SCSS","CSS","CSS Variables","Tailwind",{"title":5,"description":252},{"changefreq":265,"priority":266},"weekly",0.7,"terms\u002Fs\u002Fsass","_j_Sxocm191ekuyQkCwbGJq1XBJ_GmqtD4c9XnmHHUQ",[270,275,278,281],{"title":260,"path":271,"acronym":272,"category":251,"difficulty":273,"description":274},"\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":261,"path":276,"acronym":6,"category":251,"difficulty":273,"description":277},"\u002Fterms\u002Fc\u002Fcss-variables","CSS Variables (officially called Custom Properties) let you store values in CSS and reuse them everywhere.",{"title":259,"path":279,"acronym":6,"category":251,"difficulty":253,"description":280},"\u002Fterms\u002Fs\u002Fscss","SCSS is the syntax of Sass that looks like regular CSS but with superpowers added.",{"title":262,"path":282,"acronym":6,"category":251,"difficulty":273,"description":283},"\u002Fterms\u002Ft\u002Ftailwind","Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.",1776518310839]