Generated by SassMeister.com.

input.scss

@use 'sass:math';
@use 'sass:list';
@use 'sass:map';

$theme: (
  breakpoints: (
    s: 20em, // 320 px alt: 20,30,45,60,75,90
    m: 32em, // 512 px
    ml: 48em, // 768 px
    l: 64em, // 1024 px
    xl: 80em, // 1280 px
    xl2: 96em, // 1536 px
  ),
  grid-columns: ( _: 4 ),
  font-sizes: (
    sans: (
      xs: ( _: 12px, m: 14px, ),
      s: ( _: 14px, m: 16px, ),
      m: ( _: 16px, m: 20px, ),
      l: ( _: 18px, m: 24px, ),
    ),
    mono: (
      xs: ( _: 11px, m: 13px, ),
      s: ( _: 13px, m: 15px, ),
      m: ( _: 15px, m: 18px, ),
      l: ( _: 17px, m: 22px, ),
    ),
  ),
  spacings: (
    outer-y: ( _: 2rem ), 
    outer-x: ( _: 2rem ), 
    inner-y: ( _: 2rem ),
    inner-x: ( _: 2rem ),
  ),
);

$colors: ();

$schemes: (
  summit: (),
  rasa-lite: (),
  rasa-dark: (),
);


.test {
    @each $b in list.join(_, map.keys(map.get($theme, breakpoints))) {
        out: $b;
    }
}

output.css

.test {
  out: _;
  out: s;
  out: m;
  out: ml;
  out: l;
  out: xl;
  out: xl2;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}