CSS Variables for Beginner
Tags: variables, css, beginners
Published: 2021-01-20 10:40:28

---
title: CSS Variables for Beginner
published: true
description: 
tags: variables, CSS, beginner 
//cover_image: https://direct_url_to_image.jpg
---

## Why learn CSS Variables

Why do we learn css variables. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1pz8urmn5oc0dmhs1xja.PNG)

The old way. Same color we are using multiple places. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s8ztiv60ys1qc60hp1zu.PNG)
The new way. 

### Advantages over LESS & SASS: 
* change with JavaScript
* Ideal for responsiveness
* Perfect for themes

### Your first variables

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h98l5cht3h6m5r3cpizl.PNG)

As we can see there different colors in portfolio website. 

**CSS**

```
html, body {
    background: #ffeead;
    color: #ff6f69;
}
h1, p {
    color: #ff6f69;
}
#navbar a {
    color: #ff6f69;
}
.item {
    background: #ffcc5c;
}
button {
    background: #ff6f69;
    color: #ffcc5c;
}
```

**Bit more change**

```
:root {
    --red: #ff6f69;
}
html, body {
    background: #ffeead;
    color: var(--red);
}
```
Declare variable into `:root{}` and assigned variable `color: var(--red);`


**Finally**

```
:root {
    --red: #ff6f69;
    --beige: #ffeead;
    --yellow: #ffcc5c;
}
html, body {
    background: var(--beige);
    color: var(--red);
}
h1, p {
    color: var(--red);
}
#navbar a {
    color: var(--red);
}
.item {
    background: var(--yellow);
}
button {
    background: var(--red);
    color: var(--yellow);
}
```
Now we think start to see benefit here already. We don't have to use repeat again and again. And also more understandable. 

If bit more change for red color like. 

```
:root {
    --red: #ff8e69;
    --beige: #ffeead;
}
```

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nc9za98nftsh75maolgd.PNG)

## Overriding variables

Going to learn override variables. 


**Item html**

```
<div class="item">
      <h1>project a</h1>
      <button>learn more</button>
 </div>
```

**CSS**

```
.item {
    --red: #ff8e69;
    background: var(--yellow);
}
```
Red color inside the item change that the **h1** tag using `h1, p {
    color: var(--red);
}`. 

And button also using the red variable for his background `button {
    background: var(--red);
    color: var(--yellow);
}`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ahhgl928ia4iuiyio2a.PNG)

So `--red: #ff8e69;` variable is inherited. All the items inside the elements get the  `--red: #ff8e69;` variables updated well. 

## Local Variables

Going to learn local variables. This time going to create new variable in **local scope**.  

Only views on that's section. Change a little bit for nav color. 
```
#navbar {
    --nav-red: #ff6f19;
}
#navbar a {
    color: var(--nav-red);
}
```
Now `--nav-red` is only available in `#navbar`. Although previously using global variable. 

```
#navbar a {
    color: var(--red);
}
```

But global scope already declare few color. 

```
:root {
    --red: #ff6f69;
    --beige: #ffeead;
    --yellow: #ffcc5c;
}
```
Also using outside of the navbar. 

```
button {
    background: var(--nav-red);
    color: var(--yellow);
}
```
Now want to do now local variable into the **item**. 

```
.item {
    --item-yellow: #fffc5c;
    background: var(--item-yellow);
}
```
**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p9s6j8jimb94n8hb3yzd.PNG)

It's updated. 

## Theming

Going to learn about **Theming**

Look you have featured item. Simply giving the **featured** class one of the item. 

**HTML**

```
<div class="item featured">
        <h1>project d</h1>
        <button>learn more</button>
</div>
```

**CSS**

```
.featured {
    
}
.featured > button {
    
}
.featured > h1 {
    
}
```
Write of extra CSS for this featured class. Beautiful thing will use CSS Variable for this one. Change the value only for featured class and override them. 

```
.featured {
     --yellow: #ffe55b;
    --red: #ff5564;   
}
```
This is the local values of featured. It's not a particular color. But prove the main point. 

Now referred to `h1, p {
    color: var(--red);
}` value which declared into `.featured{}`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s77f85er1j3u0xvw96r7.PNG)

## Changing variables with JavaScript

**index.js**

```
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var red = rootStyles.getPropertyValue('--red');
console.log('red: ', red);

root.style.setProperty('--red', 'green')
```

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d57l0wpxn2uxj15pfuql.PNG)

Now want to change item background color using JavaScript which are using yellow background color. 

Now go ahead and do that. 

Simply change the red `var yellow = rootStyles.getPropertyValue('--yellow');` and `root.style.setProperty('--yellow', 'orange');`


Finally 

```
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var yellow = rootStyles.getPropertyValue('--yellow');
console.log('yellow: ', yellow);

root.style.setProperty('--yellow', 'orange');
```

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dwwvnvh5dh1dct7svwzi.PNG)

## Responsiveness and Variables

Going to teach about how to change a variables based upon the web screen. 

**CSS**
```
.grid {
    --columns: 200px 200px;
}
.grid {
    display: grid;
    grid-template-columns: var(--columns);
    grid-auto-rows: 140px;
    grid-gap: 20px;
    justify-content: center;
}
```

```
@media all and (max-width: 450px) {
    .grid {
       --columns: 200px;   
    }
}
```
So at the width low `max-width: 450px` for **450px** going to change `--columns: 200px; ` variables inside of **grid** instead of `.grid {
    --columns: 200px 200px;
}`

Now narrow the screen. And Boom!

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f7qnm37cifbu3p78pav3.PNG)


Thanks for reading. 

[Source](https://codepen.io/bipon68/pen/poEYxNo)