TECHY360
Everything You Need To Know About Tech

Learn CSS variables in 5 minutes

0 13

A quick tutorial on how to get started.
Custom CSS properties (also known as variables) are a big win for UI developers. They bring the power of variables to CSS, resulting in less repetition, better readability, and more flexibility.

In addition, unlike CSS preprocessor variables, CSS variables are actually part of the DOM, which has many advantages. Therefore, in essence, they are similar to the SASS and LESS variables on steroids. In this article, I offer you a quick course on how this technology works.

Why study CSS variables?

There are many reasons to use variables in CSS. One of the most convincing is that they reduce repetition in your styles.

In the above example, it is much better to create a variable for the #ffeead color than to repeat it the way we do it.


This will not only simplify the reading of the code, but also give you more flexibility if you want to change this color.

This has indeed been possible with SASS and LESS variables for many years. However, CSS variables have several great advantages:

  1. They do not require any transformations to work, as they are native to the browser. Thus, you do not need to configure anything to get started, as with SASS and LESS.
  2. They live in the DOM, which opens up a lot of advantages, which I will discuss in this article and in my upcoming course.

Now let’s start learning CSS variables!

Declaring your first CSS variable

To declare a variable, you first need to decide which area the variable should be in. If you want it to be available globally, just define it in the root pseudo-class. It corresponds to the root element in the document tree (usually a tag <html>).

Since the variables are inherited, your variable will become available throughout your application, since all your DOM elements are descendants of the tag <html>.

:root {
  --main-color: #ff6f69;
}

As you can see, you are declaring a variable exactly as you would set any CSS property. However, the variable must begin with two dashes.

To access a variable, you need to use a function var()and pass the variable name as a parameter.

#title {
  color: var(--main-color);
}

And that will set the color # f6f69 to title.

Declaring a local variable

Related Posts
1 of 26

You can also create local variables that are available only for the element for which they were declared, as well as for child elements. This makes sense if you know that a variable will only be used in a specific part (or parts) of your application.

For example, you may have a warning window that uses a special kind of color that is not used elsewhere in the application. In this case, it may be reasonable not to place it on a global scale:

.alert {
  --alert-color: #ff6f69;
}

This variable can now be used by its children:

.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}

If you try to use the alert-color variable elsewhere in the application, for example, in the navigation bar, this simply will not work. The browser will simply ignore this CSS line.

Convenient sensitivity of variables

The great advantage of CSS variables is that they have access to the DOM. This does not apply to LESS or SASS, as their variables are compiled into plain CSS.

In practice, this means that you can, for example, change variables based on the width of the screen:

:root {
  --main-font-size: 16px;
}
media all and (max-width: 600px) {
  :root {
    --main-font-size: 12px;
  }
}

And with these four lines of code, you have updated the main font size throughout your application if it is viewed on small screens. Pretty elegant, huh?

How to access variables using JavaScript

Another advantage of working with the DOM is that you can access variables using JavaScript and even update them, for example, based on interactions with the user. This is ideal if you want to give your users the opportunity to change their site (for example, adjust the font size).

Let’s continue with an example from the beginning of this article. Capturing a CSS variable in JavaScript takes three lines of code

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); 
--> '#ffeead'

To update a CSS variable, simply call the method setPropertyon the element in which the variables were declared, and pass the variable name as the first parameter, and the new value as the second.

root.style.setProperty('--main-color', '#88d8b0')

This primary-color can change the whole look of your application, so it’s perfect for users to set the theme for your site.

By updating a single variable, you can change the color of the navigation bar, text, and elements.

Browser support

Currently, 77 percent of global website traffic supports CSS variables, with nearly 90 percent in the United States.

Ok, that’s all. I hope you learned something new!

Comments
Loading...

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More