Generated by SassMeister.com.

input.scss

@use "sass:string";
:root {
    --background-standard: #fff;
}
@function rem($px, $base: 16) {
    @return $px / $base;
};
@function rem-to-px($rem, $base: 16) {
    @return $base * $rem
}
@function strip-unit($number) {
    @return $number / ($number * 0 + 1);
}
$mediaXL: 1200px;
$mediaLarge: 992px;
$mediaMedium: 768px;
$mediaSmall: 576px;
$mediaExtraSmall: 480px;

/* Thanks 3rdthemagical for sharing the helper function 
for converting string to number
*/
@function to-number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    @error 'Value for `to-number` should be a number or a string.';
  }

  $result: 0;
  $unit: '';
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);

    @if (index(map-keys($numbers), $character) or $character == '.') {
      @if $character == '.' {
        $digits: 1; 
      } @else if $digits == 0 {
        $result: $result * 10 + map-get($numbers, $character);  
      } @else {
        $digits: $digits * 10;
        $result: $result + map-get($numbers, $character) / $digits;
      }
    } @else {
        $unit: $unit + $character;
    } 
  }
  @return if($minus, -$result, $result);

}

@function getUnit($value) {
    $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
    $unit: '';
    @for $i from 1 through str-length($value) {
        $character: str-slice($value, $i, $i);
        @if (index(map-keys($numbers), $character) == null) {
            $unit: $unit + $character;
        }
    }
    @return $unit;
}

@function translate-media-condition($c) {
    $mediaTypeMap: (
        "screen": "only screen",
        "print": "only print",
        "retina": "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 120dpi)",
    );
    $widthMap: (
        "xs": $mediaExtraSmall,
        "sm": $mediaSmall,
        "md": $mediaMedium,
        "lg": $mediaLarge,
        "xl": $mediaXL
    );
    // If the parameter contains the less or greater than symbols, it is a query for screen width.
    @if (str-index($c, ">") or str-index($c, "<")) {
        // get the sign, which is either ">" or "<"
        $sign: str-slice($c, 1, 1);
        $width: str-slice($c, 2);
        $value: map-get($widthMap, $width);
        
        @if ($sign == ">") {
            @if ($value == null) {
                $integer: to-number($width) + 1;
                $unit: getUnit($width);
                // $unit: map-get($temp, "unit");
                $value: #{$integer} + $unit;
            } @else {
                $value: $value + 1;
            }
            // ">" means min-width. For example: ">xl" means the screen is
            // larger than whatever the value of xl is
            @return "(min-width: #{$value})";
        } 
        @return "(max-width: #{$value})";
        
    }
    // The parameter doesn't contain a greater than or less than symbol, which means it is a query for media type, such as print, screen etc.
    @return map-get($mediaTypeMap, $c);
    
//   $condMap: (
//     "screen": "only screen",
//     "print": "only print",
//     "retina":
//       "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 120dpi)",
//     ">xlWidth": "(min-width: #{$mediaXL + 1})",
//     "<xlWidth": "(max-width: #{$mediaXL})",
//     ">lgWidth": "(min-width: #{$mediaLarge + 1})",
//     "<lgWidth": "(max-width: #{$mediaLarge})",
//     ">medWidth": "(min-width: #{$mediaMedium + 1})",
//     "<medWidth": "(max-width: #{$mediaMedium})",
//     ">smWidth": "(min-width: #{$mediaSmall + 1})",
//     "<smWidth": "(max-width: #{$mediaSmall})",
//     ">xsWidth": "(min-width: #{$mediaExtraSmall + 1})",
//     "<xsWidth": "(max-width: #{$mediaExtraSmall}",
//   );
//   @return map-get($condMap, $c);
}

@mixin media($args...) {
  $query: "";
  @each $arg in $args {
    $op: "";
    @if ($query != "") {
      $op: " and ";
    }
    $query: $query + $op + translate-media-condition($arg);
  }
  @media #{$query} {
    @content;
  }
}

@mixin test($args...) {
    $length: length($args);
    margin: $length;
}

$wrapper-px: 12px;
$media-xl: 1200px;
// $wrapper-max-width: #{rem-to-px(6) + strip-unit($media-xl)}px;
$wrapper-max-width: (rem-to-px(6) + $media-xl);
$media-lg: 992px;
$media-md: 768px;

@mixin wrapper($padding) {
   
    @if ($padding == 'no-padding') {
        // max-width: $wrapper-max-width - ($wrapper-px * 2);
    } @else {
        margin-left: auto;
        margin-right: auto;
        padding: 0 $wrapper-px;
    }
    @media (min-width: $media-xl + 1) {
        max-width: $wrapper-max-width;
    }
}

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

%mx-auto {
    @include wrapper('has-padding');
    margin-left: auto;
    margin-right: auto;
}
%set-max-width {
    @media (min-width: $media-xl + 1) {
        max-width: $wrapper-max-width;
    }
}

.wrapper-set-p {
    @include wrapper('has-padding');
    // @extend %set-max-width;
}
.wrapper-set-m {
    margin-left: 28px;
    margin-right: 28px;
    @include wrapper('no-padding')
}
.wrapper {
    background: var(--background-standard);
    @include media(">1440px") {
        background: crimson;
    }
}

output.css

:root {
  --background: #fff;
}

/* Thanks 3rdthemagical for sharing the helper function 
for converting string to number
*/
.wrapper-set-p {
  margin-left: auto;
  margin-right: auto;
  padding: 0 12px;
}
@media (min-width: 1201px) {
  .wrapper-set-p {
    max-width: 1296px;
  }
}

.wrapper-set-m {
  margin-left: 28px;
  margin-right: 28px;
}
@media (min-width: 1201px) {
  .wrapper-set-m {
    max-width: 1296px;
  }
}

.wrapper {
  background: var(--background-standard);
}
@media (min-width: 1441px) {
  .wrapper {
    background: crimson;
  }
}

settings.json

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