Learning and got stuck a bit, I'm trying to get the attributes of a map that contains keys that are the same as my maps that I create in a setup area.

Currently my "Setup" maps are like:

$FontSize: (
  "xs": 0.75rem,
  "sm": 0.875rem,
  "md": 1rem,
);

and

$LineHeight: (
  "sm": 1.3,
  "md": 1.5,
);

and then in my "Typography" area I have:

$body-attributes: ( 
  "FontSize": xs,
  "LineHeight": md,
);
$h1-attributes: ( 
  "FontSize": md,
  "LineHeight": sm,
);

I would like to create a function where I input the typography variable, and return the value of the key that corresponds in the setup variable. For example, if I want the "LineHeight" of $body-attributes, I write pointerResolver($body-attributes,"LineHeight"); and the output would be 1.5rem.

The two different maps are so that I can quickly change the theming of the website by adjusting the maps, without having to find a specific selector in every nested map for each class.

Trying to split it into 2 separate functions I started with resolving my first map as normal

@function typography-map($typographyMap, $attributeToSearch){
  @return map.get($typographyMap, $attributeToSearch);
}

which works as expected and returns md as expected @debug typography-map($body-attributes, "LineHeight");

And then my second function would be

@function variable-map($variableMap, $variableToSearch){
  @return map.get($variableMap, $variableToSearch);
}

which unsurprisingly works as expected and returns 1.5 as expected @debug variable-map($LineHeight, "md");

So putting the two map.get functions together I tried this:

@function pointerResolver($typographyMapToSearch, $attributeToSearch){
// Create a new variable named $secondkey to hold the result of the first "layer" of map.get
  $secondkey: map.get($typographyMapToSearch, $attributeToSearch);
  $variableMap: "$" + $attributeToSearch;
  @return map.get($variableMap, $secondkey);
}

this results with the error $map: "$LineHeight" is not a map. when I input @debug pointerResolver($body-attributes, "LineHeight"); Ok, so it doesn't like the quotes great I'll just use string.unquote() right.

@function pointerResolver($typographyMapToSearch, $attributeToSearch){
// Create a new variable named $secondkey to hold the result of the first "layer" of map
  $secondkey: map.get($typographyMapToSearch, $attributeToSearch);
  $variableMap: string.unquote("$" + $attributeToSearch);
  @return map.get($variableMap, $secondkey);
}

@debug pointerResolver($body-attributes, "LineHeight"); -> $map: $LineHeight is not a map. "Huh... could swear it is... unquote probably treats the unquoted thing still as a string because of how SASS handles strings?"

At this point I'm assuming that it's something like a type error, where I'm outputting a string, but trying to use it like it's a variable. But I'm kinda lost on how to do it.

Quite possible that this isn't even the best way to go about this problem.

Here's my full trial code:

@use "sass:map";
@use "sass:string";

$FontSize: (
  "xs": 0.75rem,
  "sm": 0.875rem,
  "md": 1rem,
);

$LineHeight: (
  "sm": 1.3,
  "md": 1.5,
);

//----------------------------------

$body-attributes: ( 
  "FontSize": xs,
  "LineHeight": md,
);

//@debug map.get($body-sm-attributes, "FontSize"); //xs
//@debug map.get($body-sm-attributes, "LineHeight"); //lg

//----------------------------------
//@function typography-map($typographyMap, $attributeToSearch){
//  @return map.get($typographyMap, $attributeToSearch);
//}
//@debug typography-map($body-attributes, "LineHeight");

//@function variable-map($variableMap, $variableToSearch){
//  @return map.get($variableMap, $variableToSearch);
//}
//@debug variable-map($LineHeight, "md");



@function pointerResolver($typographyMapToSearch, $attributeToSearch){
// Create a new variable named $secondkey to hold the result of the first "layer" of map
  $secondkey: map.get($typographyMapToSearch, $attributeToSearch);
  $variableMap: string.unquote("$" + $attributeToSearch);
  @return map.get($variableMap, $secondkey);
}

@debug pointerResolver($body-attributes, "LineHeight");