CSS Variables

CSS Variables (Custom Properties) let you define reusable values in CSS, similar to variables in programming languages. Using CSS variables can greatly reduce repetitive code and make it easy to manage design tokens like theme colors and spacing.

Defining Variables

CSS variables use custom property names (starting with --) to declare:

Example

<style>
/* Define global variables in :root */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --border-radius: 8px;
  --spacing: 16px;
  --font-size: 16px;
}
</style>

Using Variables

Reference variables using the var() function:

Example

<style>
.button {
  background-color: var(--primary-color);
  color: white;
  border-radius: var(--border-radius);
  padding: var(--spacing);
  font-size: var(--font-size);
}

.card {
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
  padding: var(--spacing);
}
</style>
<button class="button">Button</button>
<div class="card">Card</div>

Variable Scope

CSS variable scope is determined by where they're defined:

Global variables — defined in :root:

Example

<style>
:root {
  --color: blue;
}
</style>
<div class="box-demo">Demo box showing current property effect</div>

Local variables — defined in a specific selector, only effective in that selector and its children:

Example

<style>
.card {
  --card-bg: #f5f5f5;
  --card-padding: 20px;
}

.card-header {
  background: var(--card-bg);
  padding: var(--card-padding);
}
</style>
<div class="card">Card</div>
<div class="card-header">Card header</div>

Variable Inheritance

CSS variables inherit like normal CSS properties:

Example

<style>
:root {
  --theme-color: #333;
}

/* Override variable in a container */
.dark-theme {
  --theme-color: #eee;
}

.dark-theme .content {
  color: var(--theme-color);  /* #eee */
}

.content {
  color: var(--theme-color);  /* #333 */
}
</style>
<div class="dark-theme">Dark theme preview</div>
<div class="content">Main content area</div>

Fallback Values for var()

var() can set a second parameter as a fallback — used when the variable is undefined:

Example

<style>
.element {
  color: var(--undefined-color, red);  /* Uses red because --undefined-color is undefined */
  background: var(--bg, var(--fallback, #eee));  /* Can nest fallbacks */
}
</style>
<div class="element">This is an example element</div>

Modifying Variables with JavaScript

A major advantage of CSS variables is that they can be dynamically modified via JavaScript:

Example

// Get
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

// Set
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Implementing Theme Switching

CSS variables are the best way to implement theme switching like "dark mode":

Example

<style>
/* Light theme (default) */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f5f5f5;
  --border-color: #dddddd;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-color: #1a1a2e;
  --text-color: #eeeeee;
  --card-bg: #16213e;
  --border-color: #0f3460;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
</style>

Then switch themes via JavaScript:

document.documentElement.setAttribute('data-theme', 'dark');
// or
document.documentElement.setAttribute('data-theme', 'light');

Advantages of CSS Variables

1. Reduce repetitive code: One variable used in many places, change once to update all
2. Runtime modifiable: Can be dynamically changed via JS for theme switching
3. Scope control: Can override variable values in specific containers
4. Semantic: --primary-color is easier to understand than #3498db

Differences from Preprocessors

CSS Variables (Custom Properties) differ from Sass/Less variables:

❓ FAQ

📖 Summary

• CSS variables are very important tools in modern CSS development
• Defined with --variable-name, used with var(), they make style code cleaner and easier to maintain
• The greatest value: change one value, and all places referencing that variable automatically update
• Theme switching, responsive color schemes, unified design language — CSS variables are especially useful in large projects

📝 Exercises

1. Create a page using CSS variables to define at least 5 variables for theme colors, text colors, spacing, etc., and use them throughout the page.
2. Based on the above page, implement "one-click theme color switching" — modify the primary color variable in :root and observe changes in all related elements.
3. Use CSS variables to implement a simple "day/night" mode switch (by switching class or data-theme attribute via JS).
4. Locally override CSS variable values in a container (like a card component) and observe style changes in its child elements.