Media mixins, ultra range: ul, xl, lg, md, sm, xs, vs, us

_mixins-media.scss

@use '../presets' as *;

$diff: 0.2px;

/* ul */
@mixin ul-min {
  @media (min-width: $ul) {
    @content;
  }
}

@mixin ul {
  @media (max-width: ($ul - $diff)) {
    @content;
  }
}

@mixin ul-xl {
  @media (max-width: ($ul - $diff)) and (min-width: $xl) {
    @content;
  }
}

@mixin ul-lg {
  @media (max-width: ($ul - $diff)) and (min-width: $lg) {
    @content;
  }
}

@mixin ul-md {
  @media (max-width: ($ul - $diff)) and (min-width: $md) {
    @content;
  }
}

@mixin ul-sm {
  @media (max-width: ($ul - $diff)) and (min-width: $sm) {
    @content;
  }
}

@mixin ul-xs {
  @media (max-width: ($ul - $diff)) and (min-width: $xs) {
    @content;
  }
}

@mixin ul-vs {
  @media (max-width: ($ul - $diff)) and (min-width: $vs) {
    @content;
  }
}

@mixin ul-us {
  @media (max-width: ($ul - $diff)) and (min-width: $us) {
    @content;
  }
}

/* xl */
@mixin xl-min {
  @media (min-width: $xl) {
    @content;
  }
}

@mixin xl {
  @media (max-width: ($xl - $diff)) {
    @content;
  }
}

@mixin xl-lg {
  @media (max-width: ($xl - $diff)) and (min-width: $lg) {
    @content;
  }
}

@mixin xl-md {
  @media (max-width: ($xl - $diff)) and (min-width: $md) {
    @content;
  }
}

@mixin xl-sm {
  @media (max-width: ($xl - $diff)) and (min-width: $sm) {
    @content;
  }
}

@mixin xl-xs {
  @media (max-width: ($xl - $diff)) and (min-width: $xs) {
    @content;
  }
}

@mixin xl-vs {
  @media (max-width: ($xl - $diff)) and (min-width: $vs) {
    @content;
  }
}

@mixin xl-us {
  @media (max-width: ($xl - $diff)) and (min-width: $us) {
    @content;
  }
}

/* lg */
@mixin lg-min {
  @media (min-width: $lg) {
    @content;
  }
}

@mixin lg {
  @media (max-width: ($lg - $diff)) {
    @content;
  }
}

@mixin lg-md {
  @media (max-width: ($lg - $diff)) and (min-width: $md) {
    @content;
  }
}

@mixin lg-sm {
  @media (max-width: ($lg - $diff)) and (min-width: $sm) {
    @content;
  }
}

@mixin lg-xs {
  @media (max-width: ($lg - $diff)) and (min-width: $xs) {
    @content;
  }
}

@mixin lg-vs {
  @media (max-width: ($lg - $diff)) and (min-width: $vs) {
    @content;
  }
}

@mixin lg-us {
  @media (max-width: ($lg - $diff)) and (min-width: $us) {
    @content;
  }
}

/* md */
@mixin md-min {
  @media (min-width: $md) {
    @content;
  }
}

@mixin md {
  @media (max-width: ($md - $diff)) {
    @content;
  }
}

@mixin md-sm {
  @media (max-width: ($md - $diff)) and (min-width: $sm) {
    @content;
  }
}

@mixin md-xs {
  @media (max-width: ($md - $diff)) and (min-width: $xs) {
    @content;
  }
}

@mixin md-vs {
  @media (max-width: ($md - $diff)) and (min-width: $vs) {
    @content;
  }
}

@mixin md-us {
  @media (max-width: ($md - $diff)) and (min-width: $us) {
    @content;
  }
}

/* sm */
@mixin sm-min {
  @media (min-width: $sm) {
    @content;
  }
}

@mixin sm {
  @media (max-width: ($sm - $diff)) {
    @content;
  }
}

@mixin sm-xs {
  @media (max-width: ($sm - $diff)) and (min-width: $xs) {
    @content;
  }
}

@mixin sm-vs {
  @media (max-width: ($sm - $diff)) and (min-width: $vs) {
    @content;
  }
}

@mixin sm-us {
  @media (max-width: ($sm - $diff)) and (min-width: $us) {
    @content;
  }
}

/* xs */
@mixin xs-min {
  @media (min-width: $xs) {
    @content;
  }
}

@mixin xs {
  @media (max-width: ($xs - $diff)) {
    @content;
  }
}

@mixin xs-vs {
  @media (max-width: ($xs - $diff)) and (min-width: $vs) {
    @content;
  }
}

@mixin xs-us {
  @media (max-width: ($xs - $diff)) and (min-width: $us) {
    @content;
  }
}

/* vs */
@mixin vs-min {
  @media (min-width: $vs) {
    @content;
  }
}

@mixin vs {
  @media (max-width: ($vs - $diff)) {
    @content;
  }
}

@mixin vs-us {
  @media (max-width: ($vs - $diff)) and (min-width: $us) {
    @content;
  }
}

/* us */
@mixin us-min {
  @media (min-width: $us) {
    @content;
  }
}

@mixin us {
  @media (max-width: ($us - $diff)) {
    @content;
  }
}