Generated by SassMeister.com.

input.scss

$breakpoints: (

    small: 40em,
    medium: 65em,
    
);

@mixin media-query($key) {
    
    $size: map-get($breakpoints, $key);
    
    @media only screen and (min-width: $size) {
        @content;
    }    
}


/// @use 'colors' as *;
/// Colors Map
$colors: (

    primary: (
    
        100: hsl(14, 100%, 80%),
        200: hsl(14, 100%, 70%),
        300: hsl(14, 100%, 60%),
        400: hsl(14, 100%, 43%),
        500: hsl(14, 100%, 20%),
        
    ),
    
    secondary: (
    
        100: hsl(219, 89%, 80%),
        200: hsl(219, 89%, 70%),
        300: hsl(219, 89%, 60%),
        400: hsl(212, 61%, 37%),
        500: hsl(219, 89%, 20%),
        
    ),
)


:root {
    
    @each $color, $shades in $colors {
        
        @each $shade, $value in $shades {
            
            --clr-#{$color}-#{$shade}: #{$value};
            
        }
        
    }
    
}


@function color($color, $shade) {
    
    @return --clr-#{$color}-#{$shade};
    
}


.class {
    color: color('primary', '500');
}




/// @use 'type-scale' as *;
$type-scale: (

    small: (
        300: 1rem,
        400: 1.125rem,
        500: 1.563rem,
        600: 1953rem,
        700: 2.441rem,
        800: 3.052rem,
    ),
    
    large: (
        300: 1rem,
        400: 1.425rem,
        500: 2rem,
        600: 1.827rem,
        700: 4rem,
        800: 5.653rem,
    ),

);

:root {
    
    @each $screen-size, $font-size in $type-scale {
        
        @if $screen-size == small {
            
            @each $size, $value in $font-size {
                
                --fs-#{$size}: #{$value};
                
            }
            
        } @else {
            
            @include media-query(small) {
                
                @each $size, $value in $font-size {
                    
                    --fs-#{$size}: #{$value};
                    
                }
                
            }
            
        }
        
    }
    
}

@function font-size($weight) {
    
    @return --fs-#{$weight};
    
}

.class {
    
    font-size: font-size('300');
    
}


// Creates Classes based in colors map
@each $color, $shades in $colors {
    @each $shade, $value in $shades {
        .color-#{$color}-#{$shade} {   
            color: --clr-#{$color}-#{$shade};
        }
    }
}

output.css

:root {
  --clr-primary-100: #ffb199;
  --clr-primary-200: #ff8a66;
  --clr-primary-300: #ff6333;
  --clr-primary-400: #db3300;
  --clr-primary-500: #661800;
  --clr-secondary-100: #9fbef9;
  --clr-secondary-200: #6e9ef7;
  --clr-secondary-300: #3e7ef4;
  --clr-secondary-400: #255b98;
  --clr-secondary-500: #062560;
}

.class {
  color: --clr-primary-500;
}

:root {
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.563rem;
  --fs-600: 1953rem;
  --fs-700: 2.441rem;
  --fs-800: 3.052rem;
}

@media only screen and (min-width: 40em) {
  :root {
    --fs-300: 1rem;
    --fs-400: 1.425rem;
    --fs-500: 2rem;
    --fs-600: 1.827rem;
    --fs-700: 4rem;
    --fs-800: 5.653rem;
  }
}

.class {
  font-size: --fs-300;
}

.color-primary-100 {
  color: --clr-primary-100;
}

.color-primary-200 {
  color: --clr-primary-200;
}

.color-primary-300 {
  color: --clr-primary-300;
}

.color-primary-400 {
  color: --clr-primary-400;
}

.color-primary-500 {
  color: --clr-primary-500;
}

.color-secondary-100 {
  color: --clr-secondary-100;
}

.color-secondary-200 {
  color: --clr-secondary-200;
}

.color-secondary-300 {
  color: --clr-secondary-300;
}

.color-secondary-400 {
  color: --clr-secondary-400;
}

.color-secondary-500 {
  color: --clr-secondary-500;
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}