CSS Variables for Beginner

Why learn CSS Variables

Why do we learn css variables.

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

The new way.

Advantages over LESS & SASS:

• change with JavaScript
• Ideal for responsiveness
• Perfect for themes

Your first variables

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

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);
}

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

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{}

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

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

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

Thanks for reading.

Source