Generated by SassMeister.com.

input.scss

// => Grid Setup
$gridSetup:(
    minWidth: 240px,
    maxWidth: 1440px,
    mobile:(
        columns: 4,
        gutter: 16px,
        offset: 16px,
    ),
    tablet:(
        columns: 6,
        gutter: 24px,
        offset: 24px,
    ),
    desktop:(
        columns: 12,
        gutter: 24px,
    ),
);


@function grid($var, $var2: null, $setup: $gridSetup) {
    @if($var2 == null) {
        $result: map-get($setup, $var);
        @return $result;
    } @else {
        $map: map-get($setup, $var);
        $result: map-get($map, $var2);
        @return $result;
    }
}

@mixin grid-type($type) {
    grid-column: grid(tablet, columns);
    gap: grid($type, gutter);
}


.class2{
   @include grid-type(mobile)
}


// => Button
/// Create Button Mixin 
/// @author Lucas Levino
/// @param {String} $type - Button Type 
/// @param {String} $textcolor - Text Color (Rgb,Hex) 
/// @param {String} $border [$color] - Color (Rgb,Hex) 
/// @param {String} $background [none] - Color (Rgb,Hex) 
/// @param {Length} $radius [5px] - Border radius
/// @param {Length} $paddingY [4px] - Padding In top and Bottom
/// @param {Length} $paddingX [16px] - Border In Left and Right
@mixin create-button($textcolor, $border, $background, $radius: null, $paddingY: null, $paddingX: null) {
  padding: $paddingY $paddingX;
  border: 1px solid $border;
  border-radius: $radius;
  color: $textcolor;
  background: $background;
}

/// Button type Mixin 
/// @author Lucas Levino
/// @param {String} $type - Button Type 
/// @param {String} $textcolor - Text Color (Rgb,Hex) 
/// @param {String} $border - Color (Rgb,Hex) 
/// @param {Length} $radius [5px] - Border radius
/// @param {Length} $paddingY [4px] - Padding In top and Bottom
/// @param {Length} $paddingX [16px] - Border In Left and Right
@mixin button($type, $textcolor, $border, $background: none, $paddingY: 12px, $paddingX: 16px, $radius: 24px) {
  @if $type == 'outline' {
    // background = NONE in outline buttons 
    @include create-button($textcolor, $border, none, $radius, $paddingY, $paddingX)
  } @else {
    @include create-button($textcolor, $border, $background, $radius, $paddingY, $paddingX)
  }
}    



$colors: (
    primary: (
        clr: rgb(255,0,84),
        hover: darken(clr, 20),
    ),
    
    secondary: (
        100: hsl(219, 89%, 80%),
        200: hsl(219, 89%, 70%),
        300: hsl(219, 89%, 60%),
    ),
);

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

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

.class {
   color: color(primary);
   background: color(secondary, 100);
}

output.css

.class2 {
  grid-column: 6;
  gap: 16px;
}

:root {
  --clr-primary-disable: #ffb199;
  --clr-primary-clr: #ff8a66;
  --clr-primary-hover: #ff6333;
  --clr-secondary-100: #9fbef9;
  --clr-secondary-200: #6e9ef7;
  --clr-secondary-300: #3e7ef4;
}

.class {
  color: --clr-primary-clr;
  background: --clr-secondary-100;
}

settings.json

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