CSS Variables

Understanding and Using Variables in CSS

1. Definition of CSS Variables

CSS variables (custom properties) allow reusable values across a CSS document. They are defined using two dashes (--) at the start.

/* Definition */
:root {
    --main-color: #3498db;
    --var-color: #ff5733;
}

Result:

This text uses the variable `--main-color`.

2. Using `var()`

Access CSS variables using the `var()` function. Example: color: var(--var-color);

/* Usage */
.element {
    color: var(--var-color);
}

Result:

This text uses the variable via `var()`.

3. Scope of Variables

Variables defined in :root are global, while those defined within a selector are local.

/* Global and Local Variables */
:root {
    --global-color: blue;
}

.element {
    --local-color: red;
    color: var(--local-color);
}

Result:

This text uses the global variable.
This text uses the local variable.

4. Fallback Values

Add a fallback value to the var() function if the variable is not defined. Example: var(--main-color, black);

/* Fallback Values */
.element {
    color: var(--undefined-color, black);
}

Result:

This text uses the fallback value (black).

5. Variables in Media Queries

Variables can be redefined in media queries to adapt styles.

/* Media Queries Example */
:root {
    --main-color: green;
}

@media (max-width: 600px) {
    :root {
        --main-color: purple;
    }
}

.element {
    color: var(--main-color);
}

Result:

Resize the screen to see this text change color dynamically.

6. Variables et JavaScript

Modifiez les variables dynamiquement avec JavaScript en utilisant setProperty().

/* JavaScript */
document.documentElement.style.setProperty('--main-color', 'orange');

Result:

This text's color was set by JavaScript.

7. Syntax of Variable Names

Variable names must begin with two dashes (--) and are case-sensitive. Example: --mainColor ≠ --maincolor.

/* Syntax */
:root {
    --mainColor: blue;
}

Result:

Correct syntax for variables.

8. Combining Variables with `calc()`

Combine variables with calc() for dynamic calculations.

/* calc() Example */
:root {
    --base-size: 16px;
}

.element {
    font-size: calc(var(--base-size) * 1.5);
}

Result:

This text uses calc() with variables.

9. Variables et héritage

Les variables suivent les règles de la cascade et de l'héritage.

/* Héritage */
.parent {
    --parent-color: orange;
    color: var(--parent-color);
}
.child {
    color: var(--parent-color);
}

Result:

Parent text
Child inherits the color.

10. Code Maintainability

CSS variables simplify code maintenance by centralizing styles.

/* Maintainable Code */
:root {
    --main-bg: #f0f0f0;
    --main-text: #333;
}

Result:

Centralized styles make updates easier.

11. Animating CSS Variables

CSS variables themselves cannot be directly animated, but their values can be applied to animatable properties.

/* Animation Example */
:root {
    --box-color: red;
}

.box {
    width: 100px;
    height: 100px;
    background-color: var(--box-color);
    animation: colorChange 2s infinite alternate;
}

@keyframes colorChange {
    from {
        --box-color: red;
    }
    to {
        --box-color: yellow;
    }
}

Result:

12. CSS Variables with Gradients

CSS variables can be used to define gradient colors for flexibility and reusability.

/* Gradient Example */
:root {
    --start-color: #ff5733;
    --end-color: #33c1ff;
}

.gradient-box {
    width: 200px;
    height: 100px;
    background: linear-gradient(to right, var(--start-color), var(--end-color));
}

Result:

13. Reusing Variables Across Components

CSS variables allow for consistent theming across multiple components.

/* Component Example */
:root {
    --button-bg: #4CAF50;
    --button-color: white;
}

.button {
    padding: 10px 20px;
    background-color: var(--button-bg);
    color: var(--button-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button:hover {
    background-color: var(--button-color);
    color: var(--button-bg);
}

Result:

Additional Resources