Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.18.0)
// ----

$tokens: (
  size-scale: (
    300: 0.8rem,
    500: 1.25rem,
    600: 1.56rem,
    700: 1.95rem,
    800: 2.44rem,
    900: 3.05rem,
    base: 1rem,
    max: 4rem
  ),
  colors: (
    primary: #173854,
    primary-shade: #102538,
    primary-glare: #22547c,
    highlight: #fedb8b,
    light: #ffffff,
    mid: #cccccc,
    dark: #333333,
    slate: #404040
  ),
  fonts: (
    base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
    serif: "'Lora', serif"
  )
);

@function map-deep-get($map, $keys...) {
  $value: $map;
  @each $key in $keys {
    $value: map-get($value, $key);
  }
  @return $value;
}

@function tokens($key: size-scale,  $value: 500) {
  $fetched-value: map-deep-get($tokens, $key, $value);

  @return $fetched-value;
}

.test1 {
    padding: tokens($key: size-scale, $value: 300);
    color: tokens($key: colors, $value: primary);
}

.test2 {
    padding: tokens(size-scale, 600);
    color: tokens(colors, highlight);
}

SassMeister-output.css

.test1 {
  padding: 0.8rem;
  color: #173854;
}

.test2 {
  padding: 1.56rem;
  color: #fedb8b;
}