CODEWITHSUNDEEP
variablessasseach
Simon Trichereau
Simon Trichereau

Reputation: 809

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

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...

Upvotes: 2

Views: 7043

Answers (2)

Jakob E
Jakob E

Reputation: 4926

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

Upvotes: 3

nazifa rashid
nazifa rashid

Reputation: 1504

//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

Upvotes: 0

Related Questions