Question about SCSS map

How to make loop with

@each

@each

or some think else or join to

foo-bar

foo-bar

bar-foo:123

bar-foo:123

with map-get.

$test:(
    foo:(
        bar: foo1,
        foo-bar: (
            bar-foo: 123,
        ),
    ),
);

:root {
    --t : #{map-get(map-get($test,foo),bar)}
}

$test:(
    foo:(
        bar: foo1,
        foo-bar: (
            bar-foo: 123,
        ),
    ),
);

:root {
    --t : #{map-get(map-get($test,foo),bar)}
}

MarkBoots•12/30/22, 2:47 PM

found this online https://stackoverflow.com/questions/66003935/how-to-use-map-deep-get-in-sass
in your case it would be this example

T. IssamOP•12/30/22, 3:01 PM

Oh to out put all like a tree, this is ex:

OUTPUT:
,
?

MarkBoots•12/30/22, 3:24 PM

ohw, that's a whole other question
think this would do

will be compiled to

@function map-deep-get($map, $keys...) {
   $scope: $map; $i: 1;
   @while (type-of($scope) == map) and ($i <= length($keys)) {
      $scope: map-get($scope, nth($keys, $i));
      $i: $i + 1;
   }
   @return $scope;
}

$test:(
  foo:(
    bar: foo1,
    foo-bar: (
      bar-foo: 123,
    ),
  ),
);

:root {
  --s : #{map-deep-get($test, "foo", "bar")}; /* foo1 */
  --t : #{map-deep-get($test, "foo", "foo-bar", "bar-foo")}; /* 123 */
}

@function map-deep-get($map, $keys...) {
   $scope: $map; $i: 1;
   @while (type-of($scope) == map) and ($i <= length($keys)) {
      $scope: map-get($scope, nth($keys, $i));
      $i: $i + 1;
   }
   @return $scope;
}

$test:(
  foo:(
    bar: foo1,
    foo-bar: (
      bar-foo: 123,
    ),
  ),
);

:root {
  --s : #{map-deep-get($test, "foo", "bar")}; /* foo1 */
  --t : #{map-deep-get($test, "foo", "foo-bar", "bar-foo")}; /* 123 */
}

$colors:(
   blue:(
      100: #ff0000,
      200: #ff0505
   ),
   red:(
      100: #123456,
      200: #987654
   )
);

:root{
   @each $color, $set in $colors{
      @each $number, $hex in $set{
         --colors-#{$color}-#{$number}: #{$hex}
      }
   }
}

$colors:(
   blue:(
      100: #ff0000,
      200: #ff0505
   ),
   red:(
      100: #123456,
      200: #987654
   )
);

:root{
   @each $color, $set in $colors{
      @each $number, $hex in $set{
         --colors-#{$color}-#{$number}: #{$hex}
      }
   }
}