@media mixins, миксины, диапазон ultra: ul, xl, lg, md, sm, xs, xx, ux

_mixins-media.scss

$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-xx {
  @media (max-width: ($ul - $diff)) and (min-width: $xx) {
    @content;
  }
}

@mixin ul-ux {
  @media (max-width: ($ul - $diff)) and (min-width: $ux) {
    @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-xx {
  @media (max-width: ($xl - $diff)) and (min-width: $xx) {
    @content;
  }
}

@mixin xl-ux {
  @media (max-width: ($xl - $diff)) and (min-width: $ux) {
    @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-xx {
  @media (max-width: ($lg - $diff)) and (min-width: $xx) {
    @content;
  }
}

@mixin lg-ux {
  @media (max-width: ($lg - $diff)) and (min-width: $ux) {
    @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-xx {
  @media (max-width: ($md - $diff)) and (min-width: $xx) {
    @content;
  }
}

@mixin md-ux {
  @media (max-width: ($md - $diff)) and (min-width: $ux) {
    @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-xx {
  @media (max-width: ($sm - $diff)) and (min-width: $xx) {
    @content;
  }
}

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

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

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

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

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

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

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

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

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

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