HTML CSS - Mastering CSS Variables

Mastering CSS variables for dynamic styling

CSS variables (also known as custom properties) enable dynamic and reusable styling in CSS. This tutorial covers advanced techniques for mastering CSS variables to create dynamic and maintainable styles.

Defining CSS Variables

CSS variables are defined within a selector using the --variable-name: value; syntax. Typically, they are defined in the :root pseudo-class for global access:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}
            

Using CSS Variables

Once defined, CSS variables can be used in your CSS by referencing them with the var() function:

body {
    font-size: var(--font-size);
    color: var(--primary-color);
}

h1 {
    color: var(--secondary-color);
    font-size: calc(var(--font-size) * 2);
}
            

In this example, the font-size and color properties are set using the values of the CSS variables defined in the :root pseudo-class.

Advanced Usage

CSS variables can be used for more complex scenarios, such as theming and responsive design. Here is an example:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

body.light-theme {
    --primary-color: #f39c12;
    --secondary-color: #e74c3c;
}

body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}
            

In this example, the light-theme class changes the values of the CSS variables, allowing for dynamic theming.

Responsive Design with CSS Variables

CSS variables can be combined with media queries for responsive design:

:root {
    --font-size: 16px;
}

@media (min-width: 600px) {
    :root {
        --font-size: 18px;
    }
}

body {
    font-size: var(--font-size);
}
            

In this example, the font size changes based on the screen width, making the design responsive.

Dynamic Updates with JavaScript

CSS variables can be dynamically updated using JavaScript, allowing for interactive and dynamic styling:

<script>
document.documentElement.style.setProperty('--primary-color', '#8e44ad');
</script>
            

In this example, the primary color is updated dynamically using JavaScript.

Fallback Values

The var() function allows you to provide a fallback value in case the CSS variable is not defined:

body {
    color: var(--text-color, black);
}
            

In this example, if --text-color is not defined, the color will default to black.

Combining CSS Variables and Custom Properties

CSS variables can be combined with other custom properties to create powerful, dynamic styles. Here is an example:

:root {
    --base-spacing: 8px;
}

.container {
    padding: calc(var(--base-spacing) * 2);
    margin: var(--base-spacing);
}

.button {
    padding: var(--base-spacing);
    margin-top: var(--base-spacing);
}
            

In this example, the base spacing value is used to dynamically calculate padding and margin for different elements.

Summary

In this tutorial, you learned advanced techniques for mastering CSS variables. You explored defining and using CSS variables, dynamic updates with JavaScript, responsive design, fallback values, and combining variables with custom properties. These techniques enable dynamic and maintainable styling, significantly enhancing your CSS capabilities and allowing you to create flexible and responsive web designs.