hippie-style/mixins/_media_query.scss

@use "sass:math";

//Sections for Media Queries
@mixin forPhoneUp {
  @media (min-width: #{$screen_tiny - 1}) { @content; } //599px
}
@mixin forPhoneOnly {
  @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
}
@mixin forTabletPortraitUp {
  @media (min-width: $screen_small) { @content; } //600px
}
@mixin forTabletPortraitOnly {
  @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
}
@mixin forTabletLandscapeUp {
  @media (min-width: $screen_small) { @content; } //900px
}
@mixin forTabletLandscapeOnly {
  @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
}
@mixin forDesktopUp {
  @media (min-width: $screen_medium) { @content; } //1200px
}
@mixin forDesktopOnly {
  @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
}
@mixin forBigDesktopUp {
  @media (min-width: $screen_huge) { @content; } //1800px
}

//Mobile-first Media Query
@mixin goingLarge($width) {
  // @media (min-width: $width/16+em) { @content; }
  // @media (min-width: (math.div($width, 16)+em)) { @content; }
  @media (min-width: ($width)) { @content; }
}

//Desktop-first Media Query
@mixin goingSmall($width) {
  @media (max-width: ($width)) { @content; }
}