Introduction

Defining a variable in the program helps us to store and modify. We can change the variable's value easily with one change. Variable are helpful in many scenarios.

CSS does support variable declaration and we are going to learn more about the variable declaration and utilization today.

So let's get started.

Defining the variable

We can declare a variable with two scopes i.e, global and local. Declaring a variable with a global scope can be accessed throughout the document. While with local, it is limited within the selector.

Global Declaration

Global are declared in a special selector : root. Within the selector, we define the variable as a double hyphen(--) followed by name of the variable.

  :root{
  --background: #f1f7fe;
  --boderRadius: 10px;
}

Local Variable

The local variable will be defined and used within the same selector.

     --background: #f1f7fe;
    background-color: var(--background);

You can use this variable in the document with the var() function. You need to provide the name of the variable within the bracket.

  body{
  background-color: var(--background);
}

Overriding Variable

You can override i.e, change the value of a variable within a selector. This value will be valid within the same selector in which it will be defined.

:root{
  --background: #f1f7fe;
  --boderRadius: 10px;
}

div{
  --background: #DD4847;
  background-color: var(--background)
}

CSS Variable in JavaScript

CSS variable can be accessed and modified within the javascript. It can be accessed by the query selector.

let element = document.querySelector(':root')

You can get the value of the property with getPropertyValue() fucntion.

let background = element.getPropertyValue('--background')

You can change the value of this Variable with style.setProperty() function. It takes two values within the quotation marks separated by comma(,). The first value is the name of the variable and the second one is the updated value.

element.style.setProperty()

Example

We are going to change the color palette of the website by clicking on the button. Changing of color will be done in javascript.

index.html

We are having two containers. One for our color palette and the other for the button.

<div class="container">
        <div class="circle two"></div>
        <div class="circle three"></div>
        <div class="circle four"></div>
    </div>
    <div>
        <button id="palette1" onclick="palette1()">Color 1</button>
        <button id="palette2" onclick="palette2()">Color 2</button>
        <button id="palette3" onclick="palette3()">Color 3</button>
        <button id="palette4" onclick="palette4()">Color 4</button>
    </div>

style.css

We have used the CSS variable to define and use the variable in the stylesheet for defining the color palette of our webpage.

:root {
  --one: #f9ed69;
  --two: #f08a5d;
  --three: #b83b5e;
  --four: #6a2c70;
}

script.js

We will change the value of the variable when the user clicks on the button.

var element = document.querySelector(":root")

console.log("HEELO WORLD")

const palette1 = () => {

    element.style.setProperty('--one', '#f9ed69')
    element.style.setProperty('--two', '#f08a5d')
    element.style.setProperty('--three', '#b83b5e')
    element.style.setProperty('--four', '#6a2c70')
}

CodePen

Here is the Codepen of the App. You can change the color of the webpage by clicking on the button. By default Color 1 is active.

Last Note

That's it for CSS Variable for now. I hope you will try to use variables in your CSS.

Thanks for reading the blog post.