$extraSmallScreen: 'only screen and (max-width: 575px)';
$smallScreen: 'only screen and (max-width: 767px)';
$mediumScreen: 'only screen and (max-width: 991px)';
$largeScreen: 'only screen and (max-width: 1199px)';
$xLargeScreen: 'only screen and (min-width: 1200px)';

@mixin lessThanExtraSmall{ @media #{$extraSmallScreen} { @content; } }
@mixin lessThanSmall{ @media #{$smallScreen} { @content; } }
@mixin lessThanMedium{ @media #{$mediumScreen} { @content; } }
@mixin lessThanLarge{ @media #{$largeScreen} { @content; } }
@mixin greaterThanLarge { @media #{$xLargeScreen} { @content; } }