lessVariables.less

// Mine

@larger-than-mobile: ~"min-width: 400px";
@larger-than-phablet: ~"min-width: 550px";
@larger-than-tablet: ~"min-width: 768px";
@larger-than-desktop: ~"min-width: 1000px";
@larger-than-desktophd: ~"min-width: 1200px";

// Breakpoints
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";

//=============

@xs-and-up: ~"only screen"; // xs is the smallest size, so "xs and up" is basically "everything on a screen"
@xs-only: ~"only screen and (max-width: @{screen-xs-max})";
@sm-and-up: ~"only screen and (min-width: @{screen-sm-min})";
@sm-only: ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@md-and-up: ~"only screen and (min-width: @{screen-md-min})";
@md-only: ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-md-max})";
@lg-and-up: ~"only screen and (min-width: @{screen-lg-min})";
@lg-only: @lg-and-up;

// Media query names like how we talk in the project (although "true" responsive webdesign shouldn't use these terms)
@print: ~"print";
@mobile: @xs-only; // Don't use this if you're using other sizes too, because Mobile First should be the default.
@tablet: @sm-only;
@desktop: @md-and-up;