🎯 CSS var() Function

The var() function in CSS is used to insert the value of a custom property (more commonly known as a CSS variable) into other CSS properties.

CSS variables are custom properties that must begin with two dashes (--) and can store specific values like colors, font sizes, margins, or padding. Once defined, they can be globally reused across your entire stylesheet.

Variables are typically defined inside the :root selector, making them globally accessible to every HTML element on the webpage. You then use the var() function to extract and apply that stored value.

The following example shows how to declare a primary brand color globally and then distribute it seamlessly across buttons and headings:

/* 1. Declaring global custom properties */
:root {
    --main-color: #3498db;  /* Soft Blue */
    --padding-size: 15px;    /* Global layout spacing */
}

/* 2. Calling the variables using var() */
button {
    background-color: var(--main-color);
    padding: var(--padding-size);
    color: white;
    border: none;
}

h2 {
    color: var(--main-color);
}
                

In this scenario, --main-color holds the hex code `#3498db`. When the browser interprets var(--main-color), it injects that exact blue hue into both the button's background and the heading text color.

The var() function accepts an optional second argument known as a **fallback value**. If the variable has not been defined or fails to load, the browser will use this secondary value as an automatic backup:

/* If --accent-color is missing, the text falls back to 'red' */
p {
    color: var(--accent-color, red);
}
                

Transitioning to a variable-driven workflow elevates standard CSS code into a robust, maintainable architecture:

• **Effortless Maintenance:** If your brand colors change, you only have to edit a single value inside the `:root` rather than executing a massive find-and-replace across thousands of code lines.
• **Theme Switching:** Makes implementing modern Light and Dark Modes trivial, as you can easily swap variable definitions dynamically via classes or JavaScript.
• **Consistency:** Eliminates spacing or color mismatch errors across large development teams.