DEV Community

loading...

CSS Variables for Beginner

bipon68 profile image Bipon Biswas ・3 min read

Why learn CSS Variables

Why do we learn css variables.

Alt Text

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

Alt Text
The new way.

Advantages over LESS & SASS:

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

Your first variables

Alt Text

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

Bit more change

:root {
    --red: #ff6f69;
}
html, body {
    background: #ffeead;
    color: var(--red);
}
Enter fullscreen mode Exit fullscreen mode

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

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

Output

Alt Text

Overriding variables

Going to learn override variables.

Item html

<div class="item">
      <h1>project a</h1>
      <button>learn more</button>
 </div>
Enter fullscreen mode Exit fullscreen mode

CSS

.item {
    --red: #ff8e69;
    background: var(--yellow);
}
Enter fullscreen mode Exit fullscreen mode

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

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

Now --nav-red is only available in #navbar. Although previously using global variable.

#navbar a {
    color: var(--red);
}
Enter fullscreen mode Exit fullscreen mode

But global scope already declare few color.

:root {
    --red: #ff6f69;
    --beige: #ffeead;
    --yellow: #ffcc5c;
}
Enter fullscreen mode Exit fullscreen mode

Also using outside of the navbar.

button {
    background: var(--nav-red);
    color: var(--yellow);
}
Enter fullscreen mode Exit fullscreen mode

Now want to do now local variable into the item.

.item {
    --item-yellow: #fffc5c;
    background: var(--item-yellow);
}
Enter fullscreen mode Exit fullscreen mode

Output

Alt Text

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

CSS

.featured {

}
.featured > button {

}
.featured > h1 {

}
Enter fullscreen mode Exit fullscreen mode

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

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

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

Output

Alt Text

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

Output

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode
@media all and (max-width: 450px) {
    .grid {
       --columns: 200px;   
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Thanks for reading.

Source

Discussion (0)

pic
Editor guide