CSS Variables

home

darkmode lightmode

CSS variables are pretty useful when you want to use the same color or other value frequently in your styling, particularly so if you want to change that value, without having to find every place you used it to manually change it. They are most often used for colors, but they are not limited to colors!

:root {
    --acc: hotpink;}

Suppose we want an accent color that is pink, we may want to use it for links, borders, headings, etc. To make variables we put them in the :root {} selector. We name our variable what ever we like, prefixing it with --. After the colon we define the variable, in this example it is a color, it could be an HTML color, an rgb() color, or a hexcode color.

body {
    border: 1px solid var(--acc);}
a {
    color: var(--acc);}
h1, h2, h3 {
    color: var(---acc);}

In a selector we use the variable by putting it in var() and including the dashes.

Suppose we dont like how hotpink looks as our accent color, instead of changing every property we gave hotpink, we can just change the variable's value in the root selector! --acc: purple;

Hotpink is a pretty easy color to remember, but rgb() and hex colors are much less easy to remember, so we can define a variable for them with an easy to remember name. Again this also makes it easy to change this color if we want. You may want to avoid naming your color variable something like --red though, in case you ever want to change that color to something other than red... Likewise, --white and --black will be confusing variable names if you want to create a dark/light mode.

:root {
    --acc: hotpink;
    --bg: black;
    --text: ivory;}

You of course can make as many variables as you want!

What about non-color values?

Suppose for some reason you like to make everything 20px, font size, margins, padding, border radius, etc. You could make a variable for this.

:root {
    --space: 20px;}
    
body {
    margin: var(--space);
    padding: var(--space);
    border: 1px solid blue;
    border-radius: var(--space);
    font-size: var(--space);}

But wait, you realize you want this space to be larger, like 25px. Well now you can just change --space to 25px. Okay thats not a very practical example, to be fair I haven't yet needed to make a variable for a set number value, but maybe you will.

Is that it? No, we can do more! Variables can be a whole value, or a portion of a value. As long as a whole value is made when the variable is plugged it, it will work.

So far we have just done one value, but what about properties that are summaries and take a series of values, like border: [width] [style] [color]?

:root {
    --border1: 2px solid red;}

body {
    border: var(--border1);
a {
    border: var(--border1);
button {
    border: var(--border1)}
button:hover, button:focus {
    outline: var(--border1);}

Here the varible covers three values, those required for border and outline properties. This variable would not work in other properties like color or background.

Now lets try a fragment of a value.

:root {
    --bg: 50,20,200;}

body { 
    text: rgb(var(--bg));}

rgb(var(--bg)) = rgb(50,20,200). I made this variable only a portion of an rgb color code, not too useful at the moment, but if I want some proerties to have the same color, but different opacities, it will be very useful!

:root {
    --bg: 50,20,200;}

body { 
    text: rgb(var(--bg));}
button {
    background: rgba(var(--bg),0.2);}

My button background will be the same color as my text, but at 20% opacity. rgba(var(--bg),0.2) = rgba(50,20,200,0.2)

The same thing can be done with hex values! If --bg: #00FF00, then var(--bg)24 is that same color at a low opacity (#00FF0024).

:root {
    --rainbow: red, orange, yellow, green, blue, purple;}

body {
    background-image: linear-gradient(var(--rainbow));}
button {
    border: 2px solid transparent;
    border-image: conic-gradient(var(--rainbow), red);}

Here I have the color parts of a rainbow gradient defined, so I don't have to type them all out everytime when I want to use the gradient. I didn't include the gradient in the variable however, to allow me to easily use the same rainbow in different kinds of gradients (linear, radial, conic). This also allowed me to add an extra color for the conic gradient so that the start and end are the same color, which will allow the end to blend into the beginning.

Thats not the end of possibilities for CSS variables, so have fun and experiment!