Mixin for media queries with .no-mq fallback (for <IE9)

mediaquery.less

@sml-bp: 480px;
@med-bp: 720px;
@lrg-bp: 970px;

.phablet(@rules) {
   @media screen and (min-width: @sml-bp) {
      @rules();
    }
};

.tablet(@rules) {
   @media screen and (min-width: @med-bp) {
      @rules();
    }
};

.desktop(@rules) {
    @media screen and (min-width: @lrg-bp) {
      @rules();
    }
    .no-mq &  {
      @rules();
    }
};

body {
  background: black;
}

.phablet ({
  body {
    background: blue;
  }
});

.tablet({
  body {
    background: red;
  }
});

.desktop ({
  body {
    background: yellow;
  }
});

.my-class {
  color: #FFF;
  
  .tablet({
    color: #000;
  });
  
  .desktop({
    color: red;
  });
}