Neat media query in sass

_mixins.scss

// Breakpoints (this map lives in variables).

$breakpoint:(
  'xxsmall': 400px, // max-width
   'xsmall': 400px, // min-width...
    'small': 600px,
  'medium': 1000px,
   'large': 1200px,
  'xlarge': 1400px,
 'xxlarge': 1600px,
);




/*
 * To use:
 * @include media('xxsmall'){...width: 100%; etc...} <-xxsmall is locked.
 * @include media('xsmall'){...width: 50%; etc...} <-xsmall is smallest itteration.
 * @include media('small'){...width: 100%; etc...} <- anything higher overwrites the rule set in lower itteration.
 * e.g. media('xlarge') is already {...width: 100%; etc...} so its not needed.. unless it needs a new size, e.g.:
 * @include media('xlarge'){...width: 200%; etc...} <- so width is now 100% on xxsmall, 50% on xs,s,m,l and 200% on xl & xxl.
 */

// Media queries... normally lives in the mixins file.
@mixin media($break) {
 $value: map-get($breakpoints, $break);
 $xxsmall: map-get($breakpoint, 'xxsmall');
  
  @if $value < $xxsmall {
    @media (max-width: $value){
      @content;
    }
  }//@if xxsmall
  
  @else {
    @media (min-width: $value){
      @content;
    }
  }//@if xsmall
}

@mixin full-width {
  width: 100%;
  float: none;
  clear: both;
}

@mixin small-full {
  @media (max-width: $breakpoint-xxsmall) {
    @include full-width;
  } // @media small
}