• Chapter 7 — CSS Variables
  • The Problem Without Variables
  • Declaring a Variable
  • Using a Variable
  • A Full Design System in Variables
  • var() Fallback Value
  • calc() — Math in CSS
  • Dark Mode with CSS Variables
  • Local Variables — Scoping
  • Responsive Variables with Media Queries
  • Summary

§Chapter 7 — CSS Variables

§The Problem Without Variables

Imagine your site uses the same blue color in 20 places:

.header    { background-color: #2563eb; }
.button    { background-color: #2563eb; }
.link      { color: #2563eb; }
/* ...17 more places */

Change the blue to green → manually hunt and replace 20 lines → miss some → it breaks.

§Declaring a Variable

CSS variables are declared with two dashes:

:root {
  --primary-color: #2563eb;
}

:root is the top of the entire document. Variables declared here are available everywhere.

💡 :root is like declaring a const at the very top of your file — global scope.

§Using a Variable

.header  { background-color: var(--primary-color); }
.button  { background-color: var(--primary-color); }
.link    { color: var(--primary-color); }

Change one line → updates everywhere:

:root {
  --primary-color: #16a34a; /* changed here — updates everywhere */
}

§A Full Design System in Variables

:root {

  /* Colors */
  --color-primary:    #2563eb;
  --color-secondary:  #7c3aed;
  --color-success:    #16a34a;
  --color-danger:     #dc2626;
  --color-warning:    #d97706;
  --color-text:       #1a1a1a;
  --color-text-muted: #6b7280;
  --color-bg:         #ffffff;
  --color-bg-subtle:  #f9fafb;
  --color-border:     #e5e7eb;

  /* Typography */
  --font-family: 'Inter', Arial, sans-serif;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  2rem;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Borders */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* Transitions */
  --transition: 200ms ease;
}

§var() Fallback Value

.box {
  color: var(--text-color, black);
  /*                       ↑ fallback if variable doesn't exist */
}

Like a default parameter: function greet(name = "stranger")

§calc() — Math in CSS

.sidebar {
  width: calc(100% - 250px);
}

.padding {
  padding: calc(var(--space-md) * 2);
}

You can mix units — px, %, vw — in one calculation.

§Dark Mode with CSS Variables

:root {
  --color-bg:   #ffffff;
  --color-text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:   #0f0f0f;
    --color-text: #f0f0f0;
  }
}

Every element using these variables automatically flips to dark mode. Change 2 lines — not 200.

§Local Variables — Scoping

:root {
  --color-primary: #2563eb;
}

/* Override just for this component */
.danger-card {
  --color-primary: #dc2626;
  background: var(--color-primary); /* uses red, not blue */
}

.normal-card {
  background: var(--color-primary); /* still uses global blue */
}

§Responsive Variables with Media Queries

:root {
  --spacing-page: 1rem;
  --font-size-h1: 2rem;
}

@media (min-width: 768px) {
  :root {
    --spacing-page: 2rem;
    --font-size-h1: 3rem;
  }
}

/* Then in your rules — no more repeated media queries */
.page { padding: var(--spacing-page); }
h1    { font-size: var(--font-size-h1); }

§Summary

Tags: #CSS #css #vdsology #webdevelopment #vdsologyCSS #CSS3 #CSSreference #CSSreference2026