Sass grid system with responsive breakpoint mixin

_grid-settings.scss

$columns: (
  xs: 2,
  s: 2,
  m: 8,
  l: 12,
  xl: 12,
);
$gutters: (
  xs:20px,
  s: 20px,
  m: 20px,
  l: 20px,
  xl: 20px,
);
$breakpoints: (
  xs: (
    from: 0
  ),
  s: (
    from: 360px
  ),
  m: (
    from: 640px
  ),
  l: (
    from: 1020px
  ),
  xl: (
    from: 1200px
  ),
);

_media-queries.scss

/* stylelint-disable scss/at-if-no-null */

// Built in modules
@use "sass:meta";
@use "sass:map";

// Grid system settings
@use "grid-settings";

// =========================================================
// Functions and mixins
// =========================================================

@function is-number($value) {
  @return type-of($value) == 'number';
}

@function is-string($value) {
  @return type-of($value) == 'string';
}

@function is-number-breakpoint($value) {
  @return is-number($value) and index('rem' 'px', unit($value)) != null;
}

/// Breakpoint
///
/// Provides responsive breakpoints for screens based on the grid system settings
///
/// @param {String | Boolean | Number} $from [false] - One of the grid-settings.$breakpoints or number value using px/rem unit
/// @param {String | Boolean | Number} $to [false] - One of the grid-settings.$breakpoints or number value using px/rem unit
///
/// @content styling rules, wrapped into a @media query
///
/// @example scss
/// @use "media-queries" as mq;
///
/// .element {
///   @include mq.breakpoint($to: l) {
///     color: red;
///   }
///   @include mq.breakpoint($from: m, $to: l) {
///     background: yellow;
///   }
///   @include mq.breakpoint(m, l) {
///     background: brown;
///   }
///   @include mq.breakpoint($from: l) {
///     color: blue;
///   }
/// @include mq.breakpoint(120px) {
///     background: pink;
///   }
/// @include mq.breakpoint($from: m, $to: 1200px) {
///     background: lime;
///   }
/// }
///
/// @access public
@mixin breakpoint($from: 0, $to: 0) {
  $from-object: null !default;
  $from-min: null !default;
  $from-object: map.get(grid-settings.$breakpoints, $from);

  @if $from-object == null {
    @if is-number-breakpoint($from) {
      $from-min: $from;
    }
  } @else {
      $from-min: map.get($from-object, from);
  }

  $to-object: null !default;
  $to-min: null !default;
  $to-object: map.get(grid-settings.$breakpoints, $to);

  @if $to-object == null {
    @if is-number-breakpoint($to) {
      $to-min: $to;
    }
  } @else {
      $to-min: map.get($to-object, from);
  }

  @if $from-min != null and $to-min != null {
    @media only screen and (min-width: $from-min) and (max-width: $to-min) { @content; }
  } @else {
    @if $from-min != null {
      @media only screen and (min-width: $from-min) { @content; }
    } @else if $to-min != null{
      @media only screen and (max-width: $to-min) { @content; }
    } @else {
      @error "$from and $to breakpoints must be one of [xs, s, m, l, xl] or a number based [px] or [rem] value";
    }
  }
}