DEV Community

Cover image for CSS Variables
Jordan Soo Yen Yih
Jordan Soo Yen Yih

Posted on

CSS Variables

CSS variables aka custom properties allows you to reuse values throughout your stylesheet. It increases your efficiency, reduce code duplication and a lot of cool tricks you could do with them.🤩


Global Variables

We can define global variables that will be use throughout the entire website on the root element.

:root {
   --warning-color: yellow; 

   /* Format --<YOUR_VARIABLE_NAME>: <ANY_CSS_VALUE> */
}
Enter fullscreen mode Exit fullscreen mode

Start with the double dash, followed by whatever name you want to use for the variable. Then you can use any valid CSS value.

Then you can use the variable with the var function.

body {
   color: var(--warning-color);
}
Enter fullscreen mode Exit fullscreen mode

Tips: When calling a CSS variable with the var function, You can pass in a second argument as a fallback value.

body {
   color: var(--warning-color, red);
}
Enter fullscreen mode Exit fullscreen mode

As example above, if the variable is undefined or invalid CSS value, then it will use red instead.

Now by using the CSS Variables, when we want to change the value, we just need to update once instead of go through every places.

Variable Cascade Downwards

We can override the Global CSS variables value in the children. Let's say we have a global variable in previous example, and we have a card class that change the --warning-color variable to red. So the HTML element with this card class will use the red value instead of yellow value.

/* Global */
:root {
   --warning-color: yellow;
}

/* Local */
.card {
   --warning-color: red;
}
Enter fullscreen mode Exit fullscreen mode

That means we can change the appearance of our website by simply tweaking CSS Variables value. This concept very powerful when combine with Media Queries💪.

For example if the viewport is smaller, you may want to decrease the margin between HTML elements instead of updating potential more than 100 CSS classes😵🤯, just define a media query and change the CSS variables value.

@media screen and (min-width: 600px) {
   :root {
      --margin-base: 10px;
   }
}

/* Small Screens */
@media screen and (max-width: 600px) {
   :root {
      --margin-base: 6px;
   }
}
Enter fullscreen mode Exit fullscreen mode

Another example is we can use the prefers-color-scheme media query to toggle between light theme and dark theme based on the user's device preferences.

@media (prefers-color-scheme: dark) {
    :root {
       --text-color: white;
       --background-color: black;
    }
}
Enter fullscreen mode Exit fullscreen mode

Besides that, CSS variables also work great with calc

.my-title {
   --regular-number: 8;

   margin: calc( var(--regular-number) * 1px );
}
Enter fullscreen mode Exit fullscreen mode

Besides that, you are not limited to use a single variable in a property value. For example below we can define several variables.

:root {
   --red: 86;
   --green: 23;
   --blue: 107;
}

.content-card {
   color: rgb( var(--red), var(--green), var(--blue) );
}
Enter fullscreen mode Exit fullscreen mode

This makes CSS Variables extremely useful on building themes. This is because when we combine with Javascript and change the CSS classes on the fly, then the browser will automatically repaint the style of the website.✨🤩

thank_you_gif

Thanks for reading.

Above is what I learnt about CSS Variables and how to apply them. If you have any other interesting way on using CSS Variables, please comment below to share with me.🙏😊

Discussion (0)