@mobile: ~'@media (max-width: 400px) ';
@tablet: ~'@media (max-width: 800px) ';

.bp(@rules) {
  @media @mobile {
    & .mobile  { @rules(); }
  }
}

.bp2(@point,@rules) {
  & when( @point = tablet) {
      @media @tablet { @rules(); }
  }
}

body {
  .bp({width: 50%;});
  .bp2(tablet, {width: 100%;});
}

// body {
//   .bp({width: 50%;});
//   .bp2(tablet, {width: 100%;});
// }

// @media @media (max-width: 400px)  {
//   body .mobile {
//     width: 50%;
//   }
// }
// @media @media (max-width: 800px)  {
//   body {
//     width: 100%;
//   }
// }