Preview

If I am being completely honest with you, this was one of the hardest topics I've ever had to deal with while starting out with CSS. Even after my certificate completion on FreeCodeCamp, I had no clue as to what the hell var() is and its purpose, it just seemed too complicated.

Now its one of my favourite things about CSS. I took some time to learn about it, read blogs and watched YouTube videos and its not so bad at all. Are you curious about the :root and var() properties and how you can use them for your site?

Let the curiosity end and your love for variables begin today!

What are variables?

In programming languages, a variable is defined as a 'named storage' for data or a temporary storage for values so that they can be reused. Its the same for CSS, since variables are used to declare a style once and then reuse that style throughout your entire site. Who knew that CSS is secretly a programming language (or at least I wish it was).

Variables might seem like they are complicated to use but they are like any other CSS property, with the exception that you get to define your own custom property. Variables also cascade and can be inherited or overriden! Now isn't that exciting :)

How to define a variable?

Variables are defined inside the :root of your document. What does that mean? The :root refers to the <html> tags, since our entire site is inside the HTML tags. That's why we use the :root selector because it has a higher specificity and makes your custom properties global and allows them to be used throughout your document.

Syntax breakdown

:root {
   --name: value;
   --nameTwo: value;
   --name-three: value;
   --name-for-four: value;
}

Any declaration begins with 2 hyphens, which let's the browser know that its a custom property
Followed by a value, just like you would any CSS property.
Declarations can be written in CamelCase or if long worded, can be separated by a hyphen
Its convenient to use the :root selector to group all variables/declarations on one spot to keep them intact.

NB Variables are case sensitive (e.g --nametwo isn't the same as --nameTwo ). When assigning them, make sure they are as exactly as they've been declared in the :root.

How to assign a variable?

Let's declare a variable and assign it to some elements in the code.

:root {
   --mainColour: rebeccapurple;
   --shadow: 2px 5px 10px gray;
   --fs: 1.5em;
   --py: 5rem;
}

After you've defined your variables, they have to be assigned to different child elements in your document. We pass the variable we want to apply to certain elements like:

h1, h2, h3 {
   color: var(--mainColour);
   font-size: var(--fs);
}

.sub-btn {
   padding: var(--py);
   background-color: var(--mainColour);
   box-shadow: var(--shadow);
}

As simple as that, you have declared and assigned your variables to your desired elements. Not so bad, right? You have to admit that this makes code easier to read and to troubleshoot.

Scoped variables

Variables can be scoped too, yep! What does that mean? It means that if a variable is used within a given container or element ( see example below ), it can only be accessed or is limited to that area!

HTML code

<div id = "scoped">
  <span>More from our newsletter</span>
  <button>Subscribe</button>
</div>

CSS code

#scoped {
   display: flex;
   margin: 0;
   width: 20px;
/* Variables are limited to span and button */
   --section-color: pink;
   --font-family: serif;
   --spacing: 10px;
}

#section button {
   background-color: var(--section-color);
   padding: var(--spacing);
}

#section span {
   font-size: var(--fs); /* Aforementioned Global variable */
   font-family: var(--font-family);
}

Remember that if variables are defined in the :root selector, they can be accessed anywhere in the code with no limitations whereas if defined within a specified container, they can only be accessed only in that area.

Override code

As I've mentioned, variables are cascading and are to be treated like any other CSS property because just like any other property, you can override it. For example, what if I wanted to change the colour of my h2 to be white? This is how you can do it:

h1, h2, h3 {
   color: var(--mainColour); /* rebeccapurple */
   font-size: var(--fs);
}

h2 {
   --mainColour: white;
}

Its pretty simple but be careful not to overdo/ overuse this as you are defeating the purpose of variables if you are just going to be redefining them constantly! Variables are used to define everything on one spot and updated or changed as you go by your code, if you change variables everywhere then what's the point of using them?

Use of multiple var()

You are not limited to use a single var() in your declarations.

background: linear-gradient(45deg, var(--mainColour), var(--secondaryColour), var(--yellowGreen));

Declare a variable within a variable

Another thing you can do is declare another variable within other variables.

:root {
   --bg-colour: blue;
   --border: 2px solid var(--bg-colour);
}

.box {
  border: var(--border);
}

Fallback values

This is very helpful for troubleshooting your code. Fallback values are like if this doesn't work, do this. For example, if --mainColour is not defined or declared, the colour of the heading will be black. If there are no errors in your code, fallbacks are ignored.

.heading {
   color: var(--mainColour, black);
}

Advantages of using variables

One change updates every element that uses var() declaration.
Makes code more neat and readable.
Can have fallback values.
Are scoped ( used only within a given area ).
Debugging code made easy and quicker.
Aids to DRY ( Don't Repeat Yourself ).
They cascade. You can set a variable inside any selector to set or override its current value.
Can be accessed and manipulated in JavaScript.

Conclusion

That's how you use CSS variables!! They are really helpful and can save you a lot of time and frustration. I do advise you to play around with them yourself and see if you'll like them or not!

Otherwise stick around with me and let me make CSS easier for you 🐱‍👤

CSS Variables

Make your CSS code more clearer and simpler with your own custom properties