DEV Community

Cover image for Defining Variable in CSS with var()
Suraj Vishwakarma
Suraj Vishwakarma

Posted on • Updated on • Originally published at surajondev.com

Defining Variable in CSS with var()

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;
}
Enter fullscreen mode Exit fullscreen mode

Local Variable

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

     --background: #f1f7fe;
    background-color: var(--background);
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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

let background = element.getPropertyValue('--background')
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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')
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)