Css: Scoped variables
Tags: css, webdev, beginners
Published: 2022-09-21 09:59:51

---
title: Css: Scoped variables
published: true
description: Let’s see if it can be useful to declare our Css custom properties/variables inline
tags: css, webdev, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un5xc0yjgaqdjcgho2qw.jpg
---

{% youtube cXM0SZeWjd4 %}

Follow me on [Youtube](http://www.youtube.com/channel/UCeyqA3y26RlnfUSx3ufgFoA?sub_confirmation=1)

## Css scoped variables

In this post/video we will take a look at css scoped variables. I already have a post where we had a look at how we can [swap out text colors with Css Custom properties](https://dev.to/vanaf1979/swap-out-text-colors-with-css-custom-properties-4gg) but in this one i want to talk about declaring our variables inline.

### ___
So let's say we have this basic markup below. A simple unordered list with 8 items.

```html
<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
</ul>
```
With some basic styling we can turn these items into a 9 by 8 grid.

```css
ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0;
  list-style: none;
}

li {
  margin: 0;
  aspect-ratio: 1 / 1;
  padding: 1.5rem;
  background-color: white;
}
```

But a static grid can be kinda boring, so lets animate them a bit by creating a simple [keyframe animation](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes).

```css
@keyframes show {
  0% {
    opacity: 0;
    scale: 0.5;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}
```
With these keyframes we animate from fully transparent to fully visable, and we change the scale from 50% to 100%. We can now add this animation to our items.

```css
li {
  ...
  animation-name: show;
  animation-duration: 0.5s;
}
```
Here we set the animation name to be equal to that of the keyframes, and make the animation last for half a second.

```css
li {
  ...
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: var(--delay, 0s);
}
```
If we set a animation delay that will be applied to all our list items. But we want to stagger the animation so instead of giving a hard coded value we set it by using a css custom property or variable with a default value of 0 seconds.

```html
<ul>
  <li style="--delay: 0s;">Lorem</li>
  <li style="--delay: 0.1s;">Lorem</li>
  <li style="--delay: 0.2s;">Lorem</li>
  <li style="--delay: 0.3s;">Lorem</li>
  <li style="--delay: 0.4s;">Lorem</li>
  <li style="--delay: 0.5s;">Lorem</li>
  <li style="--delay: 0.6s;">Lorem</li>
  <li style="--delay: 0.7s;">Lorem</li>
  <li style="--delay: 0.8s;">Lorem</li>
</ul>
```
With the variable in place we can give it a unique value for each of our list items by placing it inline.

We could do the same with the [nth-of-type](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type?retiredLocale=nl) pseudo selector, but that gets messy real quick, and it will fix the number of items we can have. (If you want to know more about pseudo selectors i have a article about that [here](https://dev.to/vanaf1979/making-selections-with-css-pseudo-selectors-30p7))

Next we could use this same technique to change our background colors.

```css
li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: var(--delay, 0s);
  background-color: hsl(var(--hue, 0), 50%, 50%);
}
```

Here we add a background color to our css, and use the hsl function to create the color. We also set the hue value with a variable called --hue! (Not sure about hsl? Check out my [introduction video](https://dev.to/vanaf1979/css-hsl-colors-introduction-57da))

```html
<ul>
  <li style="--delay: 0s; --hue: 100;">Lorem</li>
  <li style="--delay: 0.1s; --hue: 120;">Lorem</li>
  <li style="--delay: 0.2s; --hue: 140;">Lorem</li>
  <li style="--delay: 0.3s; --hue: 160;">Lorem</li>
  <li style="--delay: 0.4s; --hue: 180;">Lorem</li>
  <li style="--delay: 0.5s; --hue: 200;">Lorem</li>
  <li style="--delay: 0.6s; --hue: 220;">Lorem</li>
  <li style="--delay: 0.7s; --hue: 240;">Lorem</li>
  <li style="--delay: 0.8s; --hue: 260;">Lorem</li>
</ul>
```
We can then also set these variables inline in our html. And that would give us the animation as shown below.

![Preview of animated grid items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9ic09y7kqt4ievbhuy4.gif)

### Making it a bit more dynamic

Creating all these inline variable manualy can become a bit tedious. So it would be a bit more usefull if we can create these dynamically.

```js
const listItems = Array(7).fill(null);

export default function App() {
  return (
    <main>
      <ul>
        {listItems.map((_val, i) => {
          return (
            <li key={i} style={{ "--i": i }}>
              List item
            </li>
          );
        })}
      </ul>
    </main>
  );
}
```

Here we have a very basic React app that creates a array 0f 7 empty items, and then llops over this array to make 7 list items. It also creates a inline variable called --i and sets it value to the current index.

```css
li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: var(--i, 0s);
}
```

We can now use this variable in our css! Except that the snippet above wont do anything because the value of --i is set to an integer without any usable css unit! 

```css
li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: calc(var(--i, 0s) * 0.1s);
}
```

To give it that unit we can use the [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) function and multiply the value of --i with, in this case, 0.1s! This will make each item have a 0.1s longer delay then the previous one.

```css
li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: calc(var(--i, 0s) * 0.1s);
  background-color: hsl(calc(var(--i, 0) * 40), 50%, 50%);
}
```
And again we can do the same for our background. Except in this case we multiply --i by 40 since the hue value is a number between 0 and 360 degrees, and this will give a nice rainbow effect like in the example below.

![Preview of animated list items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewmqs3c7blrjkpkr2cn0.gif)

All done! I'm pretty sure you can come up with more creative use cases then making rainbows, but at least now you have this technique in your tool belt!

Subscribe to my [Youtube channel](http://www.youtube.com/channel/UCeyqA3y26RlnfUSx3ufgFoA?sub_confirmation=1)
Buy me a [coffee](https://www.buymeacoffee.com/since1979)
Come chat on [Twitter](https://twitter.com/Vanaf1979) 
And follow me [here](https://dev.to/vanaf1979) for more articles

**Thanks for your precious time, and have an awesome day!**