SCSS / SASS : How to create variables inside an each loop

Question

In my SASS code I have an array with all my colours, then I made an each loop to create css variables from these colours, and finally I would like to do another loop to create each sass variables of these css colours... Let me show you :

/************************************************************
**********************   COULEURS   *************************
************************************************************/
$colors : (
    "pink"     : #E20071,
    "blue"     : #00A3DA,
    "gray"     : #939394,
    "darkGray" : #939394,
    "yellow"   : #FEA347,
    "green"    : #4CA66B,
    "white"    : #FFFFFF,
    "black"    : #1B1B1B,
);

:root{
    @each $key, $value in $colors {
        --#{$key} : #{$value};
    }
}

$pink     : var(--pink);
$blue     : var(--blue);
$gray     : var(--gray);
$yellow   : var(--yellow);
$green    : var(--green);
$white    : var(--white);
$black    : var(--black);
$darkGray : var(--darkGray);

So I tried something like this :

@each $key, $value in $colors {
    $#{$key} : var(--#{$key});
}

But it gives me an error : Invalid CSS after "...ue in $colors {": expected 1 selector or at-rule, was "$#{$key} : var(--#{" in /home/simon/Documents/HL3/URSELF/app/src/variables.scss (line 28, column 32)

So my question is is it possible to achieve something like this?; it will really helpfull to create variables, If I want to remove / add one, I just have to do it in the array and then all the code update itself...

Your code example works fine, take a look at [sassmeister](https://www.sassmeister.com/gist/9b8ba3c8bc89802cd81d0f0c3aa5153d). What Sass compiler and what version of Sass you're using? — Flying, Jul 29 '19 at 09:54
Oh, looks like I've misunderstood your question and you want to create **scss** variables, not **CSS** ones. Sass does not support dynamic variables creation. — Flying, Jul 29 '19 at 09:56
Possible duplicate of [Creating or referencing variables dynamically in Sass](https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass) — Arkellys, Jul 29 '19 at 10:00
@Arkellys, my bad, I didn't find it when I was looking for something similar — Simon Trichereau, Jul 29 '19 at 13:18
@Flying, ok, thanks for your answer, sadly I was expecting such a negative one, but ok, I'll do it making twice declarations ;) — Simon Trichereau, Jul 29 '19 at 13:19

Jakob E · Accepted Answer · 2019-07-29T20:48:26.007

As Flying mentioned in the comments Sass does not support dynamic variables creation. I think I would use a function to return the CSS variable if found in the $colors map

$colors : (
    "pink"     : #E20071,
    "blue"     : #00A3DA,
    "gray"     : #939394,
    "darkGray" : #939394,
    "yellow"   : #FEA347,
    "green"    : #4CA66B,
    "white"    : #FFFFFF,
    "black"    : #1B1B1B,
);

:root{
    @each $key, $value in $colors {
        --#{$key} : #{$value};
    }
}

@function color($name){
    @if not map-get($colors, $name+''){
        @error "Color `#{$name}` not found in map $colors";
    }
    @return var(--#{unquote($name)});
}

.class-name {
    color: color(pink);  //  var(--pink);
    color: color(nope);  //  throws error: "Color `nope` not found in map $colors"
}

//  note! we stringify $name (the +'' part) to ensure Sass does not interpret
//  it as a color – e.g. pink represents the hex value #ffc0cb

Hmmm I see what you did here, thanks for your answer, didn't expect that it can be with functions, I'll get a look ;) — Simon Trichereau, Jul 30 '19 at 07:57

score 0 · Answer 2 · answered Jul 29 '19 at 11:57

//Assigning Colors

$DeepKoamaru: rgba(16, 38, 111, 0.85);
$Mariner: rgba(41, 128, 185, 0.85);
$Gumbo: rgba(136, 160, 168, 0.85);
$Blackberry: rgba(77, 1, 53, 0.85);
$RoseBudCherry: rgba(150, 0, 57, 0.85);
$Bouquet: rgba(140, 102, 127, 0.85);
$Chocolate: rgba(60, 0, 0, 0.85);
$DarkBurgundy: rgba(107, 0, 15, 0.85);
$AlizarinCrimson: rgba(165, 107, 104, 0.85);

$brand-colors: $DeepKoamaru, $Mariner, $Gumbo, $Blackberry, $RoseBudCherry, $Bouquet, $Chocolate, $DarkBurgundy, $AlizarinCrimson;




@for $i from 1 through 9 {

.color-#{$i}-bar {

      header {

          .logo {
              svg {
                  color: nth($brand-colors, $i);
              }
          }

          .menu {

              svg {
                  color: nth($brand-colors, $i);
              }

              .nav-items {

                  ul {

                      li {

                          a {

                              &:hover {
                                  color: nth($brand-colors, $i);
                              }
                          }
                      }
                  }
              }
          }
      }
    }
 }

What I have done on my portfolio site is, i have stored some colors and then kept them to another variable. So that variable will hold all the colors and you can also use it as an array. So if you remove or update the loop will work according to the given variables

I have attached the code, hope it'd help

Thanks for your answer but this is not really what I wanted to do ... I already have an array of all my colours, and I'm already making an each on them to create my different css variables... But I would like to dynamically create variables from an array in SASS ... As Flying said, it's impossible... — Simon Trichereau, Jul 29 '19 at 13:20

SCSS / SASS : How to create variables inside an each loop

2 Answers2