Reszponzív töréspontok egyszerű definiálása.

@screen-xs-min:     480px;
@screen-sm-min:     768px;
@screen-md-min:     992px;
@screen-lg-min:     1200px;
@screen-xl-min:     1600px;

@screen-xs-max:     (@screen-sm-min - 1); /*767*/
@screen-sm-max:     (@screen-md-min - 1); /*991*/
@screen-md-max:     (@screen-lg-min - 1); /*1199*/
@screen-lg-max:     (@screen-xl-min - 1); /*1599*/

@mobile:             ~"only screen and (max-width: @{screen-xs-min})";

@tablet:     ~"only screen and (min-width: @{screen-xs-min}) and (max-width: @{screen-xs-max})";

@desktop:    ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";

@laptop:    ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-lg-min})";

@large:    ~"only screen and (min-width: @{screen-lg-min}) and (max-width: @{screen-xl-min})";

@max: ~"only screen and (min-width: @{screen-xl-min})";

Teszteléshez:

div#helper {
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 15px;
  z-index: 999;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;

  &::before {
    content: "FullHD";
    @media @mobile {
      content: "@media @mobile";
    }
    @media @tablet {
      content: "@media @tablet";
    }
    @media @desktop {
      content: "@media @desktop";
    }
    @media @laptop {
      content: "@media @laptop";
    }
    @media @large {
      content: "@media @large";
    }
  }

}