Defining Variable in CSS with var()
Tags: css, webdev, javascript, beginners
Published: 2022-01-15 16:54:55

# 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.

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

## Local Variable

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

```css
     --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.

```css
  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.

```css
: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.

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

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

```javascript
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.

```javascript
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.


```html
<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.

```css
: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.

```javascript
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.

{% codepen https://codepen.io/surajsrv11/pen/RwLEYOo %} 

# 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.*