SASS dynamic variable names and nested loops throwing error

Question

I'm not totally sure if what I'm attempting is possible, but I've searched around as much as I can and build the following nested loop to create many variants of hex colors (rather than manually typing out the variable names).

$colors: (
    green: #006938,
    pink: #9d1e65,
    //...
);

$variations: (
    30%, 50%, 70%,
);

@each $hex, $name in $colors {
    @each $v in $variations {
        #{$name}-#{$v}: lighten($hex, $v);
    }
}

However, I'm getting the following error on my second loop:

$ gulp sass
[17:01:14] Using gulpfile ~/Sites/webcomponents/gulpfile.js
[17:01:14] Starting 'sass'...

events.js:163
      throw er; // Unhandled 'error' event
      ^
Error: src/scss/app.scss
Error: Invalid CSS after "...n $variations {": expected 1 selector or at-rule, was "#{$name}-#{$v}: lig"
        on line 72 of src/scss/app.scss
>>     @each $v in $variations {
   -----------------------------^

    at options.error (/Users/martynbisset/Sites/webcomponents/node_modules/node-sass/lib/index.js:291:26)

Is this not the correct syntax for a nested loop? Also, when I try to do the variable name dynamically without the loop, I also get an error .. sorry, kinda two questions in one but would appreciate any advice on this as I'm quite a noob with SASS/SCSS.

$name: "Hello";
$v: "70%";

#{$name}-#{$v}: lighten($hex, $v); // throws error too :(

Answer 1

You can't declare new css property or dynamic variable name in SASS, but you can definitely do something better by converting variable name into different css classes which we will learn step by step and do corrections in your SASS.

1. Map: Map is a data-type in SASS which represents one or more key value pairs. Map keys and value can be any SASS datatype(like number, string, color, boolean, map, list of values, null).

   Syntax of map

    map-name1{
       key1: value1,
       key2: value2,
       ...
    }
   
    map-name2{  
      key1:(key11:value11, key12: value12), //value is of map datatype
      key2:(key21:value21, key22: value22)
    }
   

   So, correct the definition of $variations. Even though if you don't specify key it will work.

SASS also provides map-get() to get the value using key.

example,

$font: (    /*define 'font' map*/
  color: #666,
  size: 16px
);

body {
  color: map-get($font, color);      /*get value of 'color' property of 'font'*/
  font-size: map-get($font, size);
}

2. As we can't declare variable name dynamically in SASS, so better to create some css class using map and @each loop.

Use the below SASS code:

$color:(    
    green: #006938,
    pink: #9d1e65
);
$variations: (
   thirty: 30%,
   fifty: 50%
);

@each $name, $hex in $color {
    @each $n, $v in $variations {
        .color-#{$name}-#{$n}{
            color: lighten($hex, $v);
        }
    }
}

After compilation, it will generate the below css,

.color-green-thirty {
  color: #03ff89;
}

.color-green-fifty {
  color: #69ffb9;
}

.color-pink-thirty {
  color: #e470b1;
}

.color-pink-fifty {
  color: #f4c6e0;
}