[{"data":1,"prerenderedAt":308},["ShallowReactive",2],{"term-c\u002Fcss-variables":3,"related-c\u002Fcss-variables":290},{"id":4,"title":5,"acronym":6,"body":7,"category":271,"description":272,"difficulty":273,"extension":274,"letter":275,"meta":276,"navigation":112,"path":277,"related":278,"seo":284,"sitemap":285,"stem":288,"subcategory":6,"__hash__":289},"terms\u002Fterms\u002Fc\u002Fcss-variables.md","CSS Variables",null,{"type":8,"value":9,"toc":265},"minimark",[10,15,19,23,26,30,254,258,261],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"CSS Variables (officially called Custom Properties) let you store values in CSS and reuse them everywhere. Change the variable in one place and it updates across your whole stylesheet. They're like variables in a programming language but living inside CSS. And they work in the browser, no build step needed.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"CSS Custom Properties (CSS Variables) are defined with a -- prefix and accessed via var(). They're scoped to the DOM (can be changed per-element or in @media queries), cascade like regular CSS, and are accessible from JavaScript. They enable dynamic theming, design tokens, and real-time style updates without 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-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  --color-primary: #3b82f6;\n  --spacing-md: 1rem;\n  --radius: 8px;\n}\n\n.button {\n  background: var(--color-primary);\n  padding: var(--spacing-md);\n  border-radius: var(--radius);\n}\n\n\u002F* Override for dark mode *\u002F\n@media (prefers-color-scheme: dark) {\n  :root { --color-primary: #60a5fa; }\n}\n","css","",[38,39,40,56,74,88,101,107,114,126,148,165,182,187,192,199,222,249],"code",{"__ignoreMap":36},[41,42,45,49,53],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sMK4o",":",[41,50,52],{"class":51},"spNyl","root",[41,54,55],{"class":47}," {\n",[41,57,59,63,65,68,71],{"class":43,"line":58},2,[41,60,62],{"class":61},"sTEyZ","  --color-primary",[41,64,48],{"class":47},[41,66,67],{"class":47}," #",[41,69,70],{"class":61},"3b82f6",[41,72,73],{"class":47},";\n",[41,75,77,80,82,86],{"class":43,"line":76},3,[41,78,79],{"class":61},"  --spacing-md",[41,81,48],{"class":47},[41,83,85],{"class":84},"sbssI"," 1rem",[41,87,73],{"class":47},[41,89,91,94,96,99],{"class":43,"line":90},4,[41,92,93],{"class":61},"  --radius",[41,95,48],{"class":47},[41,97,98],{"class":84}," 8px",[41,100,73],{"class":47},[41,102,104],{"class":43,"line":103},5,[41,105,106],{"class":47},"}\n",[41,108,110],{"class":43,"line":109},6,[41,111,113],{"emptyLinePlaceholder":112},true,"\n",[41,115,117,120,124],{"class":43,"line":116},7,[41,118,119],{"class":47},".",[41,121,123],{"class":122},"sBMFI","button",[41,125,55],{"class":47},[41,127,129,133,135,139,142,145],{"class":43,"line":128},8,[41,130,132],{"class":131},"sqsOY","  background",[41,134,48],{"class":47},[41,136,138],{"class":137},"s2Zo4"," var",[41,140,141],{"class":47},"(",[41,143,144],{"class":61},"--color-primary",[41,146,147],{"class":47},");\n",[41,149,151,154,156,158,160,163],{"class":43,"line":150},9,[41,152,153],{"class":131},"  padding",[41,155,48],{"class":47},[41,157,138],{"class":137},[41,159,141],{"class":47},[41,161,162],{"class":61},"--spacing-md",[41,164,147],{"class":47},[41,166,168,171,173,175,177,180],{"class":43,"line":167},10,[41,169,170],{"class":131},"  border-radius",[41,172,48],{"class":47},[41,174,138],{"class":137},[41,176,141],{"class":47},[41,178,179],{"class":61},"--radius",[41,181,147],{"class":47},[41,183,185],{"class":43,"line":184},11,[41,186,106],{"class":47},[41,188,190],{"class":43,"line":189},12,[41,191,113],{"emptyLinePlaceholder":112},[41,193,195],{"class":43,"line":194},13,[41,196,198],{"class":197},"sHwdD","\u002F* Override for dark mode *\u002F\n",[41,200,202,206,209,212,214,217,220],{"class":43,"line":201},14,[41,203,205],{"class":204},"s7zQu","@media",[41,207,208],{"class":47}," (",[41,210,211],{"class":61},"prefers-color-scheme",[41,213,48],{"class":47},[41,215,216],{"class":61}," dark",[41,218,219],{"class":47},")",[41,221,55],{"class":47},[41,223,225,228,230,233,236,238,240,243,246],{"class":43,"line":224},15,[41,226,227],{"class":47},"  :",[41,229,52],{"class":51},[41,231,232],{"class":47}," {",[41,234,235],{"class":61}," --color-primary",[41,237,48],{"class":47},[41,239,67],{"class":47},[41,241,242],{"class":61},"60a5fa",[41,244,245],{"class":47},";",[41,247,248],{"class":47}," }\n",[41,250,252],{"class":43,"line":251},16,[41,253,106],{"class":47},[11,255,257],{"id":256},"when-youll-hear-this","When You'll Hear This",[16,259,260],{},"\"Use CSS variables for your color tokens so dark mode is a one-line swap.\" \u002F \"CSS variables can be updated from JavaScript — great for dynamic theming.\"",[262,263,264],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .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":58,"depth":58,"links":266},[267,268,269,270],{"id":13,"depth":58,"text":14},{"id":21,"depth":58,"text":22},{"id":28,"depth":58,"text":29},{"id":256,"depth":58,"text":257},"frontend","CSS Variables (officially called Custom Properties) let you store values in CSS and reuse them everywhere.","beginner","md","c",{},"\u002Fterms\u002Fc\u002Fcss-variables",[279,280,281,282,283],"CSS","Sass","SCSS","Tailwind","Responsive Design",{"title":5,"description":272},{"changefreq":286,"priority":287},"weekly",0.7,"terms\u002Fc\u002Fcss-variables","J-enLeMToz6-ey3TaEfnbcSDaV5SJuY-ROWv4JbzYeg",[291,295,298,302,305],{"title":279,"path":292,"acronym":293,"category":271,"difficulty":273,"description":294},"\u002Fterms\u002Fc\u002Fcss","Cascading Style Sheets","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":283,"path":296,"acronym":6,"category":271,"difficulty":273,"description":297},"\u002Fterms\u002Fr\u002Fresponsive-design","Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.",{"title":280,"path":299,"acronym":6,"category":271,"difficulty":300,"description":301},"\u002Fterms\u002Fs\u002Fsass","intermediate","Sass is CSS with superpowers — variables, nesting, mixins, and functions that vanilla CSS didn't have for years.",{"title":281,"path":303,"acronym":6,"category":271,"difficulty":300,"description":304},"\u002Fterms\u002Fs\u002Fscss","SCSS is the syntax of Sass that looks like regular CSS but with superpowers added.",{"title":282,"path":306,"acronym":6,"category":271,"difficulty":273,"description":307},"\u002Fterms\u002Ft\u002Ftailwind","Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.",1776518263447]