How to combine each and for loop to make easier the nth-child css-CodePudding

So my problem here is I don't know if the code is outdated or not. My code is based on this link SCSS: How to combine @for with @each? What I want to do is like this I want to pass a different color in my grid-template-rows and then do it in for loop and each loop in SCSS Here is my

$colors:(#82C9DF,#569573,#E35F5F,#FE993C,#8B983C,#0095C3,#F8AE57);

CODEPEN

CodePudding user response：

You are trying to get and set the color like this:

background: var(--#{$variable});

but $variable holds a hex color, not a CSS variable name.

(You can use your browser dev tools to see what is actually created.)

Change this to:

        background: #{$variable};

as you have already set $variable to the hex value of the color you want.

There may be a bit of confusion between what is a SASS variable and what is a CSS variable. In this case you don't need to use a CSS variable as the array of colors already holds hex colors and that is what you are picking up.