Bootstrap/Less mixin to add responsive media query within original selector's declaration

bootstrap-less-inline-media-query

//
// Load core variables
// --------------------------------------------------
@import "variables.less";

.breakpoint(@class, @rules) when (@class = xs) {
  @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {@rules();}
}

.breakpoint(@class, @rules) when (@class = sm) {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {@rules();}
}

.breakpoint(@class, @rules) when (@class = md) {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {@rules();}
}

.breakpoint(@class, @rules) when (@class = lg) {
  @media (min-width: @screen-lg-min) {@rules();}
}

// Example Usage

.my-class {
  height: 150px;
  
  .breakpoint( md, {
    height: 125px;
  });
  
  .breakpoint( sm, {
    height: 100px;
  });
}