Css Variables Advanced | Intermediate

Advanced usage of CSS variables

CSS variables, also known as custom properties, allow you to store values in one place and reuse them throughout your stylesheet. This tutorial covers advanced usage of CSS variables, including dynamic theming, responsiveness, and interactions with JavaScript.

Key Points:

CSS variables are defined using the --variable-name syntax.
They can be used to create dynamic themes and responsive designs.
CSS variables can be manipulated using JavaScript for interactive effects.

Defining and Using CSS Variables

CSS variables are defined within a selector using the --variable-name syntax and are accessed using the var(--variable-name) function:


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

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

a {
    color: var(--secondary-color);
}

Dynamic Theming with CSS Variables

CSS variables make it easy to create dynamic themes for your website. You can define themes using different sets of variables and switch between them using JavaScript:


:root {
    --background-color: #ffffff;
    --text-color: #333333;
    --link-color: #3498db;
}

[data-theme="dark"] {
    --background-color: #333333;
    --text-color: #ffffff;
    --link-color: #9b59b6;
}

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

a {
    color: var(--link-color);
}

This is an example paragraph. This is a link.

Responsive Design with CSS Variables

You can use CSS variables to create responsive designs by adjusting their values based on media queries:


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

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

@media (min-width: 1024px) {
    :root {
        --font-size: 20px;
    }
}

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

Manipulating CSS Variables with JavaScript

CSS variables can be dynamically updated using JavaScript, enabling interactive effects:


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

Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Variables and JavaScript</title>
    <style>
        :root {
            --bg-color: #ffffff;
            --text-color: #333333;
        }

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

        .theme-toggle {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #3498db;
            color: #ffffff;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <button class="swf-lsn-theme-toggle">Toggle Theme</button>

    <script>
        const toggleButton = document.querySelector('.theme-toggle');
        toggleButton.addEventListener('click', () => {
            const currentBgColor = getComputedStyle(document.documentElement).getPropertyValue('--bg-color').trim();
            if (currentBgColor === '#ffffff') {
                document.documentElement.style.setProperty('--bg-color', '#333333');
                document.documentElement.style.setProperty('--text-color', '#ffffff');
            } else {
                document.documentElement.style.setProperty('--bg-color', '#ffffff');
                document.documentElement.style.setProperty('--text-color', '#333333');
            }
        });
    </script>
</body>
</html>

Fallback Values

You can provide fallback values for CSS variables to ensure your styles are applied even if a variable is not defined:


body {
    color: var(--main-color, #000000);
    font-size: var(--font-size, 16px);
}

Using CSS Variables in Keyframes

CSS variables can also be used within keyframes for animations:


:root {
    --move-distance: 100px;
}

@keyframes move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--move-distance));
    }
}

.element {
    animation: move 2s infinite alternate;
}

Example: Advanced Usage of CSS Variables

Here is a complete example demonstrating advanced usage of CSS variables:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced CSS Variables Example</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --font-size: 16px;
        }

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

        a {
            color: var(--secondary-color);
        }

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

        @media (min-width: 1024px) {
            :root {
                --font-size: 20px;
            }
        }

        .theme-toggle {
            padding: 10px 20px;
            cursor: pointer;
            background-color: var(--primary-color);
            color: #ffffff;
            border: none;
            border-radius: 5px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Advanced CSS Variables Example</h1>
    <p>This is an example of advanced usage of CSS variables. The text size adjusts based on the screen size, and the theme can be toggled using the button below.</p>
    <a href="#">This is a link.</a>
    <button class="swf-lsn-theme-toggle">Toggle Theme</button>

    <script>
        const toggleButton = document.querySelector('.theme-toggle');
        toggleButton.addEventListener('click', () => {
            const currentColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
            if (currentColor === '#3498db') {
                document.documentElement.style.setProperty('--primary-color', '#e74c3c');
                document.documentElement.style.setProperty('--secondary-color', '#8e44ad');
            } else {
                document.documentElement.style.setProperty('--primary-color', '#3498db');
                document.documentElement.style.setProperty('--secondary-color', '#2ecc71');
            }
        });
    </script>
</body>
</html>

Summary

In this tutorial, you learned advanced techniques for using CSS variables. You explored defining and using variables, dynamic theming, responsive design, manipulating variables with JavaScript, using fallback values, and using variables in keyframes. These techniques enhance your ability to create flexible, dynamic, and maintainable stylesheets.

HTML CSS - CSS Variables