Generated by SassMeister.com.

input.scss

@use "sass:map";
@use "sass:list";

$theme: (
    null: (
        global: (
            body: (
                font-family: "'Inter', sans-serif",
                font-size: 1.4rem,
                font-weight: var(--global-font-weight-regular),
                line-height: 1.5,
                color: var(--global-color-black),
            ),
            font-weight: (
                regular: 400,
                bold: 600,
            ),
            color: (
                color: #000000,
            ),
        ),
        component: (
            title-h1: (
                font-family: var(--global-body-font-family),
                font-size: 3rem,
                line-height: 1.28,
                font-weight: var(--global-font-weight-bold),
                color: #333333,
                hero-line-height: 1.5,
            ),
        ),
    ),

    md: (
        global: (
            body: (
                font-size: 1.6rem,
            ),
        ),
        component: (
            title-h1: (
                font-size: 3.6rem,
            ),
        ),
    ),

    xl: (
        component: (
            title-h1: (
                font-size: 5.6rem,
            ),
        ),
    ),
);

$bp: (
    xl : 1000px,
    md : 860px,
);    


@each $breakpoint, $firstNestingAndValue in $theme {
    @if $breakpoint == null {
        :root {
            @each $secondNesting, $thirdNesting in $firstNestingAndValue {
                @each $thirdNesting, $fifthNesting in $thirdNesting {
                    @each $fifthNesting, $firstNestingAndValue in $fifthNesting {
                        @each $key in $fifthNesting {
                            --#{$secondNesting}-#{$thirdNesting}-#{$fifthNesting}-#{$key}: #{$firstNestingAndValue};
                        }
                    }
                }
            }
        }
    } @else {
        @media (max-width: #{map.get($bp, $breakpoint)}) {
            :root {
                @each $secondNesting, $thirdNesting in $firstNestingAndValue {
                    @each $thirdNesting, $fifthNesting in $thirdNesting {
                        @each $fifthNesting, $firstNestingAndValue in $fifthNesting {
                            @each $key in $fifthNesting {
                                --#{$secondNesting}-#{$thirdNesting}-#{$fifthNesting}-#{$key}: #{$firstNestingAndValue};
                            }
                        }
                    }
                }
            }
        }
    }
}

output.css

:root {
  --global-body-font-family-font-family: 'Inter', sans-serif;
  --global-body-font-size-font-size: 1.4rem;
  --global-body-font-weight-font-weight: var(--global-font-weight-regular);
  --global-body-line-height-line-height: 1.5;
  --global-body-color-color: var(--global-color-black);
  --global-font-weight-regular-regular: 400;
  --global-font-weight-bold-bold: 600;
  --global-color-color-color: #000000;
  --component-title-h1-font-family-font-family: var(--global-body-font-family);
  --component-title-h1-font-size-font-size: 3rem;
  --component-title-h1-line-height-line-height: 1.28;
  --component-title-h1-font-weight-font-weight: var(--global-font-weight-bold);
  --component-title-h1-color-color: #333333;
  --component-title-h1-hero-line-height-hero-line-height: 1.5;
}

@media (max-width: 860px) {
  :root {
    --global-body-font-size-font-size: 1.6rem;
    --component-title-h1-font-size-font-size: 3.6rem;
  }
}
@media (max-width: 1000px) {
  :root {
    --component-title-h1-font-size-font-size: 5.6rem;
  }
}

settings.json

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