🧩 CSS Tutorial: --variable-name (CSS Custom Properties)

📌 Introduction

CSS variables — also called CSS Custom Properties — allow you to store reusable values in your styles. They start with --variable-name and are accessed using thevar() function. They make your CSS cleaner, easier to maintain, theme-friendly, and dynamic. 🎨✨

🎯 Why Use CSS Variables?

  • Make global design tokens (colors, spacing, fonts)
  • Allow easy theme switching (dark/light mode)
  • Reduce repetition and improve maintainability
  • Work at runtime — unlike SASS variables
  • Can be updated via JavaScript

✨ Syntax

Syntax

:root {
  --variable-name: value;
}

element {
  property: var(--variable-name);
}

Note

Using :root makes variables global, because :root represents the top-level document (HTML).

🧩 Creating CSS Variables

1. Defining Variables

Define

:root {
  --main-color: #4f46e5;
  --big-radius: 12px;
  --font-size-large: 20px;
}

2. Using Variables

Use

button {
  background: var(--main-color);
  font-size: var(--font-size-large);
  border-radius: var(--big-radius);
}

🔥 Practical Examples

1. Color Theme Variables

Theme Colors

:root {
  --bg: #ffffff;
  --text: #111827;
}

body {
  background: var(--bg);
  color: var(--text);
}

2. Dark Mode Switch

Dark Mode

:root {
  --bg: #ffffff;
  --text: #111827;
}

.dark {
  --bg: #111827;
  --text: #ffffff;
}

body {
  background: var(--bg);
  color: var(--text);
}

3. Spacing & Layout Variables

Spacing

:root {
  --gap: 1.5rem;
}

.grid {
  display: grid;
  gap: var(--gap);
}

4. Gradient Variables

Gradient

:root {
  --brand-gradient: linear-gradient(to right, #06b6d4, #3b82f6);
}

.hero {
  background: var(--brand-gradient);
}

5. Using calc() with Variables

calc() + var()

:root {
  --base-size: 10px;
}

.box {
  width: calc(var(--base-size) * 10);
}

🧠 Variable Scope

CSS variables follow normal CSS inheritance rules.

Scoped Variable

.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

.card .title {
  padding: var(--card-padding); /* inherited */
}

Note

You can override variables inside specific components, making them dynamic and context-based.

🧩 Providing Fallback Values

You can give a default value using a second argument inside var().

Fallback

color: var(--unknown-color, #ff0000);

⚡ Updating Variables with JavaScript

Because CSS variables exist in the DOM, you can modify them dynamically using JavaScript.

JS Update Variable

document.documentElement.style.setProperty('--main-color', '#ef4444');

📊 Custom Properties vs Preprocessor Variables

CSS VariablesSASS/LESS Variables
Dynamic at runtimeStatic at compile time
Can be overriddenCannot change after compile
Used in JSNot accessible in JS
Follow CSS cascade & scopeNo cascade behavior

🧠 Tips & Best Practices

  • Use :root for global design tokens
  • Group variables (colors, spacing, fonts, shadows)
  • Use fallback values when necessary
  • Update variables for live themes and animations
  • Use meaningful names like --primary or --radius-lg
>>“CSS variables turn your stylesheet into a flexible, scalable design system.” ✨

🎉 Conclusion

Using --variable-name allows you to build reusable, maintainable, and theme-friendly CSS. Whether you're creating scalable design systems or building dynamic UI themes, CSS custom properties are a must-have tool in your developer toolkit. 🚀 Master them → and your CSS becomes cleaner, smarter, and future-proof.