Question about SCSS map

How to make loop with @each or some think else or join to foo-bar=>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)}
}

3 Replies

MarkBoots•2y ago

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

@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 */
}

T. Issam•2y ago

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

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

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

OUTPUT: --colors-blue-100: #ff0000, --colors-blue-200: #ff0505 ?

MarkBoots•2y ago

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

$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}
      }
   }
}

will be compiled to

:root {
  --colors-blue-100: #ff0000 ;
  --colors-blue-200: #ff0505 ;
  --colors-red-100: #123456 ;
  --colors-red-200: #987654 ;
}

:root {
  --colors-blue-100: #ff0000 ;
  --colors-blue-200: #ff0505 ;
  --colors-red-100: #123456 ;
  --colors-red-200: #987654 ;
}

Gaming

Programming

Question about SCSS map