$colors: ( 
  light: (
    text: #181a1b,
    bg: #e2e1e1,
    btn-border: #181a1b
  ),
  dark: (
    text: #e2e1e1,
    bg: #181a1b,
    btn-border: #e2e1e1
  )
);

$colors: ( 
  light: (
    text: #181a1b,
    bg: #e2e1e1,
    btn-border: #181a1b
  ),
  dark: (
    text: #e2e1e1,
    bg: #181a1b,
    btn-border: #e2e1e1
  )
);

$sizes: (
  'xs': 0.75rem,
  'sm': 0.875rem,
  'md': 1rem,
  'lg': 1.125rem,
  'xl': 1.25rem
);

@each $size, $value in $sizes {
  $fs-#{$size}: $value !global;
}

@function fs($size) {
  @return map-get($sizes, $size);
}

.text {
  font-size: $fs-md;       // doesn't work
  font-size: fs('md');     // works
}

$sizes: (
  'xs': 0.75rem,
  'sm': 0.875rem,
  'md': 1rem,
  'lg': 1.125rem,
  'xl': 1.25rem
);

@each $size, $value in $sizes {
  $fs-#{$size}: $value !global;
}

@function fs($size) {
  @return map-get($sizes, $size);
}

.text {
  font-size: $fs-md;       // doesn't work
  font-size: fs('md');     // works
}