Is it possible to dynamically retrieve scss variable value?

[DavidSvetlik]

I spent some time looking, but couldn't find any help, so I hope this issue is not duplicity and also has solution. :-)

Not sure how to properly explain this, so I will go with an example. Let's say I want to do this:

$margin: (10px, 5px);
$padding: (10px, 5px);

@mixin custom-properties($props, $index) {
	@each $prop in $props {

		#{$prop}: #{nth("$" + str-slice($prop, 3), $index)};
	}
}

:root {
	@include custom-properties((
		--margin,
		--padding
	), 1);
}

I think it's pretty obvious what I am trying to achieve here - to retrieve specific scss variable value which name is constructed "dynamically" by joining $ and string. Unfortunatelly this doesn't work. Since there is a function "global-variable-exists" that accepts argument as a string, I figure it should be somehow possible - at least to have some built in function "get-variable-value".

Thank you for any help!

[mirisuzanne]

It's not possible to dynamically call a variable, but it is possible to dynamically call map keys. Sass maps were added to handle this use-case. Something like this:

$properties: (
  margin: (10px, 5px),
  padding: (10px, 5px),
);

@mixin custom-properties($props, $index) {
  @each $prop in $props {
    $name: str-slice($prop, 3);
    $value: map-get($properties, $name);
    #{$prop}: #{nth($value, $index)};
  }
}

[DavidSvetlik]

@mirisuzanne Alright, thank you!