How to use root CSS variables like a pro

CSS variables help to style your Style Sheet with maintainable and quality update features. In this post, you learn how to use root CSS variables like a pro. CSS variables are known as Custom properties.

It helps to create a customizable design for repetition in your style sheet. And also help efforts to change some parts that are repeated on the website. Create variables, store them, and reuse for repetition them for taking an awesome design to a webpage.

How to use root CSS variables like a pro?

If you want to create style sheets more arranged, maintainable, and reusable, then use this CSS variable and learn this property. An example that doesn’t have the use of CSS variables in HTML files and CSS files.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
</head>
<body>
<div>
  <!-- How to Use CSS Variables Properly -->
  <h1>CSS Variables</h1>
  <div>
    <button class="btn sub-primary">Primary</button>
    <button class="btn">Secondary</button>
  </div>
</div>
</body>
</html>

CSS:

.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: #004aad;
}

Your webpage looks like this:

How to Use CSS Variables Properly

The .btn class used in the stylesheet is not dynamic it causes you to create a separate class for styling the button. Creating an awesome website required dynamic with your front-end styling.

Set your variable, with the prefix and have the name with a double hyphen:

:root{
/*CSS variable*/
--variable_name: value;
}

When you set the variable anywhere you are only able to use it when you select the initialized selector. Because the CSS variable is initialized with the root selector. The variables are to be accessible by the entire HTML document on a global scale.

While using the CSS variable, first you can set the CSS variable according to the above steps and then set this property to anywhere with the var() property.

:root {
/*CSS variable*/
--primary: #3289e0;
--secondary: #e38411;
}

.btn {

padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary);
background-color: var(--secondary);
}

.sub-primary {
color: var(--secondary);
background-color: var(--primary);
}

The root contains two variables which are: –primary and –secondary. This is suitable to the .btn class for color as well as the background color respectively.

When you use the CSS variable then it is easy to change all elements at a time. And reusable variables quickly change a value once to update.

How to Use CSS Variables Properly

You can also add the var() property for the second argument.

For example:

<!-- How to Use CSS Variables Properly -->
:root {

--primary: #3289e0;
--secondary: #e38411;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary, blue);
}

The following example helps to understand the variable fallback, the –primary variable in the color style. For any reason, your value is going fallback then another value is taking place. You can also add another value of the CSS variable.

Manipulating and Overriding CSS Variables with JavaScript

Manipulating CSS variables using JavaScript is a more powerful way to change your site’s look and feel. Using JavaScript, you can update your variable quickly and easily.

An example to understand the work of JavaScript for updating the value of CSS variables:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Variables - Button Variations</title>
  <link rel="stylesheet" href="Variables.css" />
  <script>
    function changeColor() {
      // Get the element you want to change the variable on
      const myElement = document.querySelector(":root");
      // Get the current value of the variable
      let currentValue =
        getComputedStyle(myElement).getPropertyValue("--secondary");
      // Set the new value for the variable
      myElement.style.setProperty("--secondary", "#DAF7A6");
    }
  </script>
</head>
<body>
  <!-- How to Use CSS Variables Properly -->

  <div>
    <h1>CSS Variables</h1>
    <div>
      <button class="btn sub-primary" onclick="changeColor()">Primary</button>
      <button class="btn">Secondary</button>
    </div>
  </div>
</body>
</html>
CSS:
:root {
--primary: #0b0c19;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
}
.sub-primary {
color: var(--primary);
background-color: var(--secondary);
}

In JavaScript code, the Changecolor() function changes the color of the button when you click on it. Using the DOM traversal method, you can apply your HTML document and manipulate the values by the Classes or selectors.

Before clicking the button:

How to Use CSS Variables Properly

After clicking the button:

How to Use CSS Variables Properly

You can also use JavaScript to add or remove the CSS variable.

For example:

<!-- How to Use CSS Variables Properly -->
// Create a new variable

document.documentElement.style.setProperty('--new-color', 'blue');
// Remove a variable
document.documentElement.style.removeProperty('--new-color');

Using CSS Variables With Preprocessors

Using variables with CSS preprocessors like SASS, LESS, and Stylus. The purpose of the CSS preprocessors is to develop the code and understand the CSS. Preprocessor much like how typescript works with JavaScript. 

With the preprocessor, it is not long for CSS development but it still offers the Combination of the CSS variable in your project. You can set the SASS variable as the $main-color and use it to add the CSS variable. And the use of the CSS variable in a regular style class.

You can also use the SASS variable for manipulating the CSS variables.

For example:

<!-- How to Use CSS Variables Properly -->
:root {

--primary: $main-color;
--secondary: lighten(var(--primary), 20%);
}
.btn {
color: var(--primary);
background-color: var(--secondary);
}

Here, the SASS value function lighten() manipulates the value of –primary and obtains the value of –secondary.

Important: the SASS value is not accessible by JavaScript. So if you use the SASS preprocessor then use only the CSS variables.

When you use a preprocessor like SASS, then can get well advantages and benefits, like features like loops and functions and CSS variables like CSS cascading.

Using CSS Variables in Web Development

Some important tips for utilizing CSS variables better.

Use Variables in Media Queries

Use the media queries to make the adjustable and beautiful for all device screen sizes.

Advantage of the Cascading Nature of CSS

When you use the CSS variable, then you have the advantage of all element styles at the time.

Test Your Variables

CSS variable is very unique Clear and maintainable code for your stylesheet. 

Note: Sometimes this does not support the browser. for that, you should test your variables for browser compatibility and make sure the variable works on all browser suitability. So I hope, now you use the how to use root CSS variables like a pro.

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!