Generated by SassMeister.com. generate-utilities

input.scss

// SETTINGS
$tiny-small: 360px !default;
$tiny-medium: 480px !default;
$tiny: 673px !default; // or 'em' if you prefer, of course
$small: 768px !default;
$medium: 1024px !default;
$large: 1200px !default;
$extra-large: 1350px !default;

// Colors
$grey3: grey;

// Additionnal "utility" breakpoints aliases
// ex. @include respond-to("medium-up") {...}
$bp-aliases: (
  'tiny-small'   : (max-width: #{$tiny-small - 1}),
  'tiny-medium'   : (max-width: #{$tiny-medium - 1}),
  'tiny'   : (max-width: #{$tiny - 1}),
  'small'  : (max-width: #{$small - 1}),
  'medium' : (max-width: #{$medium - 1}),
  'large' : (max-width: #{$large - 1}),
  'extra-large'  : (max-width: #{$extra-large - 1}),
  'tiny-small-up'   : (min-width: #{$tiny-small}),
  'tiny-medium-up'   : (min-width: #{$tiny-medium}),
  'tiny-up'   : (min-width: #{$tiny}),
  'small-up'  : (min-width: #{$small}),
  'medium-up' : (min-width: #{$medium}),
  'large-up' : (min-width: #{$large}),
  'extra-large-up' : (min-width: #{$extra-large}),
  'retina' : (min-resolution: 2dppx)
);

// MIXINS

// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
@mixin respond-to($name) {
  // If the key exists in the map
  @if map-has-key($bp-aliases, $name) {
    // Prints a media query based on the value
    @media #{inspect(map-get($bp-aliases, $name))} {
      @content;
    }
  }

  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$name}`. "
        + "Please make sure it is defined in `$bp-aliases` map.";
  }
}
/// Compute the maximum depth of a map
/// @param {Map} $map
/// @return {Number} max depth of `$map`

@function depth($map) {
  $level: 1;

  @each $key, $value in $map {
    @if type-of($value) == "map" {
      $level: max(depth($value) + 1, $level);
    }
  }

  @return $level;
}

@mixin debug-map($map) {
    @at-root {
        @debug-map {
            __toString__: inspect($map);
            __length__: length($map);
            __depth__: depth($map);
            __keys__: if(type-of($map) == 'map',map-keys($map), type-of($map));
            __properties__ {
                @each $key, $value in $map {
                    #{'(' + type-of($value) + ') ' + $key}: inspect($value);
                }
            }
        }
    }
}

// Spacings
$spacer-tiny: 0.5rem !default;
$spacer-tiny-plus: 0.7rem !default;
$spacer-small: 1rem !default;
$spacer-small-plus: 1.5rem !default;
$spacer-medium: 2rem !default;
$spacer-medium-plus: 3rem !default;
$spacer-large: 4rem !default;
$spacer-large-plus: 6rem !default;
$spacer-extra-large: 8rem !default;
$spacer-extra-large-plus: 12rem !default;
$spacer-ultra-large: 16rem !default;
$spacer-ultra-large-plus: 20rem !default;

$spacers:(
    0: 0,
    auto: auto,
    't': $spacer-tiny,
    'tp': $spacer-tiny-plus,
    's': $spacer-small,
    'sp': $spacer-small-plus,
    'm': $spacer-medium,
    'mp': $spacer-medium-plus,
    'l': $spacer-large,
    'lp': $spacer-large-plus,
    'el': $spacer-extra-large,
    'elp': $spacer-extra-large-plus
);

$utilities: (
    "flex-wrap": (
        class: flex,
        property: flex-wrap,
        values: wrap nowrap,
        important: true,
        responsive: true,
    ),
    "flex-direction": (
        class: flex,
        property: flex-direction,
        values: row column row-reverse column-reverse,
        important: true,
        responsive: true
    ),
    "marginx": (
        class: mx,
        property: margin-left margin-right,
        values: auto,
        important: true,
        responsive: true
    ),
    "marginl": (
        class: ml,
        property: margin-left,
        values: $spacers,
        important: true,
        responsive: true
    )
);

@mixin generate-utilities($utility,$infix){
    $values: map-get($utility, values);
    // If the values are a list or string, convert it into a map
    @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
        $values: zip($values, $values);
    }
    //@include debug-map($values);
    @each $key,$value in $values{
        $properties: map-get($utility, property);

        // Multiple properties are possible, for example with vertical or horizontal margins or paddings
        @if type-of($properties) == "string" {
          $properties: append((), $properties);
        }
        // Use custom class if present
        $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
        $property-class: if($property-class == null, "", $property-class);
        
        $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
        // Don't prefix if value key is null (eg. with shadow class)
        $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
        
        @if $value != null {
            .#{$property-class + $infix + $property-class-modifier} {
              @each $property in $properties {
                #{$property}: $value if(map-get($utility, important) == true, !important,null);
              }
            }
        }
        
    }
}

// OUTPUT

@each $key,$utility in $utilities{
    $infix : "";
    @include generate-utilities($utility,$infix);
}

@each $breakpoint in ['small','small-up']{
    @include respond-to(#{$breakpoint}){
        $infix : '-' + $breakpoint;
        @each $key,$utility in $utilities{
            // The utility can be disabled with `false`, thus check if the utility is a map first
            // Only proceed if responsive media queries are enabled or if it's the base media query
            @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
                @include generate-utilities($utility, $infix);
            }
        }
    }
    
}





html{
  font-size: 62.5%;
  box-sizing: border-box;
}

.container{
  max-width: 96rem;
  margin: 0 auto;
  
  //border: 1px solid red;
}

.headline{
  font-size: 3rem;
}

output.css

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-auto {
  margin-left: auto !important;
}

.ml-t {
  margin-left: 0.5rem !important;
}

.ml-tp {
  margin-left: 0.7rem !important;
}

.ml-s {
  margin-left: 1rem !important;
}

.ml-sp {
  margin-left: 1.5rem !important;
}

.ml-m {
  margin-left: 2rem !important;
}

.ml-mp {
  margin-left: 3rem !important;
}

.ml-l {
  margin-left: 4rem !important;
}

.ml-lp {
  margin-left: 6rem !important;
}

.ml-el {
  margin-left: 8rem !important;
}

.ml-elp {
  margin-left: 12rem !important;
}

@media (max-width: 767px) {
  .flex-small-wrap {
    flex-wrap: wrap !important;
  }

  .flex-small-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-small-row {
    flex-direction: row !important;
  }

  .flex-small-column {
    flex-direction: column !important;
  }

  .flex-small-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-small-column-reverse {
    flex-direction: column-reverse !important;
  }

  .mx-small-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ml-small-0 {
    margin-left: 0 !important;
  }

  .ml-small-auto {
    margin-left: auto !important;
  }

  .ml-small-t {
    margin-left: 0.5rem !important;
  }

  .ml-small-tp {
    margin-left: 0.7rem !important;
  }

  .ml-small-s {
    margin-left: 1rem !important;
  }

  .ml-small-sp {
    margin-left: 1.5rem !important;
  }

  .ml-small-m {
    margin-left: 2rem !important;
  }

  .ml-small-mp {
    margin-left: 3rem !important;
  }

  .ml-small-l {
    margin-left: 4rem !important;
  }

  .ml-small-lp {
    margin-left: 6rem !important;
  }

  .ml-small-el {
    margin-left: 8rem !important;
  }

  .ml-small-elp {
    margin-left: 12rem !important;
  }
}
@media (min-width: 768px) {
  .flex-small-up-wrap {
    flex-wrap: wrap !important;
  }

  .flex-small-up-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-small-up-row {
    flex-direction: row !important;
  }

  .flex-small-up-column {
    flex-direction: column !important;
  }

  .flex-small-up-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-small-up-column-reverse {
    flex-direction: column-reverse !important;
  }

  .mx-small-up-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ml-small-up-0 {
    margin-left: 0 !important;
  }

  .ml-small-up-auto {
    margin-left: auto !important;
  }

  .ml-small-up-t {
    margin-left: 0.5rem !important;
  }

  .ml-small-up-tp {
    margin-left: 0.7rem !important;
  }

  .ml-small-up-s {
    margin-left: 1rem !important;
  }

  .ml-small-up-sp {
    margin-left: 1.5rem !important;
  }

  .ml-small-up-m {
    margin-left: 2rem !important;
  }

  .ml-small-up-mp {
    margin-left: 3rem !important;
  }

  .ml-small-up-l {
    margin-left: 4rem !important;
  }

  .ml-small-up-lp {
    margin-left: 6rem !important;
  }

  .ml-small-up-el {
    margin-left: 8rem !important;
  }

  .ml-small-up-elp {
    margin-left: 12rem !important;
  }
}
html {
  font-size: 62.5%;
  box-sizing: border-box;
}

.container {
  max-width: 96rem;
  margin: 0 auto;
}

.headline {
  font-size: 3rem;
}

settings.json

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