css-breakpoint-mixins.less

/* Breakpoints */
/* ------------------------- Source: http://blog.scur.pl/2012/06/variable-media-queries-less-css/ */
@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)";

/* Usage */
section, div, span {
    @media @mobile {
      background: orange;
    }
    @media @tablet {
      background: purple;
    }
    @media @desktop {
      background: green;
    }
    @media @desktop-xl {
      background: blue;
    }
    @media @desktop, @desktop-xl {
      color: black;
    }
}