Named Media queries, drop in for bootstrap

_media-queries.less

/**
 * Named media queries based on Bootstrap variables
 * Usage:
 * .module {
 *   @media @lg { … }
 *   @media @md, @sm { … }
 *   @media @md-or-less { … }
 * }
 *
 *                                                                        @lg-or-more (=> 1200) - - -
 * |---------------------------------------------------------------------|
 *
 *                          - - - @less-than-md (< 992)
 *                                                      @md-to-lg (992 - 1199)
 *                                                      @md-or-more (=> 992) - - -
 * |---------------------------------------------------|-----------------|
 *
 *        - - - @less-than-sm (< 768)
 *                                    @sm-to-md (768 - 992)
 *                                    @sm-or-more (=> 768) - - -
 * |---------------------------------|-----------------|
 *
 *                  @xs-to-md (480 - 768)
 *                  @xs-or-more (=> 480) - - -
 * |---------------|-----------------|
 *
 *
 */

// @screen-lg-min: 1200px;
@lg-or-more:     ~"only screen and (min-width: @{screen-lg-min})";

// @screen-md-min: 992px
// @screen-md-max: 1199px;
@md-to-lg:      ~"only screen and (min-width: @{screen-md-min}) and (max-with: @{screen-md-max})";
@md-or-more:    ~"only screen and (min-width: @{screen-md-min})";
@less-than-md:  ~"only screen and (max-width: @{screen-sm-max})";

// @screen-sm-min: 768px;
// @screen-sm-max: 991px;
@sm-to-md:      ~"only screen and (min-width: @{screen-sm-min}) and (max-with: @{screen-sm-max})";
@sm-or-more:    ~"only screen and (min-width: @{screen-sm-min})";
@less-than-sm:  ~"only screen and (max-width: @{screen-xs-max})";


// @screen-xs-min: 480px;
// @screen-xs-max: 767px;
@xs-to-md:      ~"only screen and (min-width: @{screen-xs-min}) and (max-with: @{screen-xs-max})";
@xs-or-more:    ~"only screen and (min-width: @{screen-xs-min})";

// Note: it's best not to use the @less-than-FOO variables,
// but find a mobile first solution