Getting Started with CSS Variables
Published: 2020-03-15 04:10:03

We know variables to be containers or placeholders for values which can be used throughout a program. And if need be to change the value, you would only have to change the value of the variable rather than changing the values in all appearances of the variable.

CSS also has a variable feature which can be used to declare values that can be used for properties throughout the stylesheet.

## Benefits of CSS Variables

Here are two reasons why you should care about this feature:

1. It's very easy to change values that are the same all through the stylesheet.
2. It allows the creation themes to be easy, where two to three colors can be maintained all through the stylesheet without any variations or guesses.

## Syntax

```css
element1 {
  --pinkColor: #FFC0CB;
}
.elementUnderElement1 {
  color: var(--pinkColor);
  border: 1px solid var(--pinkColor);
}
```

As observed above, a CSS variable can be referred to as a custom property defined by you. The preceding double hyphens (--) for `pinkColor` indicate that the property is custom. This is also what makes a variable.

In the `elementUnderElement1` class, the variable can be used by calling the `var()` function and passing the custom property as an argument.

## Few things to know about CSS variables

1. They are case-sensitive.
2. They can hold any value. When called with the `var()` function, their values are used Remember that variables are just like placeholders.
3. If the value called for a property does not align with the syntax (e.g color: 20px;), the inherited or initial color is used. This is the normal behavior of CSS.
4. Variables are custom properties, and properties can be declared anywhere, so you can declare variables in any element. 
5. You can declare as many variables as you want, wherever you want.

## Scope of variables

In programming languages, you must have heard the term scope which defines the environment of a variable (i.e, which area of the program has access to that variable). The same goes for CSS. Defining the variable for `element1` scopes the variable such that only `element1` element and its children (such as `elementUnderElement1` class) have access to the variable.

### What if you want to declare a global variable?

`:root` 🔥

According to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:root),

> The `:root` CSS pseudo-class matches the root element of a tree representing the document. In HTML, `:root` represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.

Any variables declared here can be used all through the stylesheet by any element. Example:

```css
:root {
  --largeFontSize: 50px;
  --smallFontSize: 20px;
  --color1: #fcfcfc;
}
h1 {
  font-size: var(--largeFontSize);
}
@media only screen and (max-width: 400px){
  h1 {
    font-size: var(--smallFontSize);
  }
}
```

## Wrap Up

CSS allows uniformity of colors, sizes and other property values in a webpage to be made easily.

It also allows changing of values to be easy. Imagine using a color value for 20 properties in a page. Variables can be declared at a top element, and the `var` function called in the 20 places. If there's any need to change the value, you don't have to go over the 20 appearances, you're only concerned with the-top level element which the variable was declared.

However, you should put more consideration in naming variables. Instead of using `pinkColor` as a custom property, you can use `mainColor`. This is important if for any reason, you may change the value of the color variable to a color entirely different from pink.

I hope this article has given you a great kickstart to using CSS variables.

--greetings: "Thank you"

var(--greetings) for reading 😁