Use a SMACSS style CSS Module as a Less Mixin within a breakpoint as well as on it’s own (as a standalone CSS Module). Uses the (SMACSS derived) Unit grid system style of writing class names with breakpoints. This pattern will enable you to keep your Less DRY for this CSS module. Note that the example Module has classes (i.e. .x-1, .x-2) that ar…

breakpoint-mixin-wrapper.less

.inner(...) {
  /* INNER */
}
.inner(a) {
  /* type A */
  .x-1 {float: left;}
  .x-2 {float: right;}
}
.inner(b) {
  /* type B */
  .x-1 {float: right;}
  .x-2 {float: left;}
}

.wrapper (@type) {
  .wrapper-@{type} {
    .inner(@type);
  }
}

.wrapper (@type; @min; @max) {
  @media only screen and (min-width: @min) and (max-width: @max) {
    .wrapper-&@{type}--&@{min}-&@{max} {
      .inner(@type);
    }
  }
}

// Less examples:
.wrapper(a);
.wrapper(b);

.wrapper(a, 350, 500);
.wrapper(b, 250, 600);

// CSS generated by Less examples:
//
// please note:
//   that .x-1 and .x-2 are placeholder (i.e. not very good) class names used for the sake of illustrating structure
//   .wrapper and .inner are likewise chosen to illustrate the concept - and are not intended for production use
//
// .wrapper-a {
//   /* INNER */
//   /* type A */
//   overflow: hidden;
// }
// .wrapper-a .x-1 {
//   float: left;
// }
// .wrapper-a .x-2 {
//   float: right;
// }
//
// .wrapper-b {
//   /* INNER */
//   /* type B */
//   overflow: hidden;
// }
// .wrapper-b .x-1 {
//   float: right;
// }
// .wrapper-b .x-2 {
//   float: left;
// }
//
// @media only screen and (min-width: 350) and (max-width: 500) {
//   .wrapper-a--350-500 {
//     /* INNER */
//     /* type A */
//     overflow: hidden;
//   }
//   .wrapper-a--350-500 .x-1 {
//     float: left;
//   }
//   .wrapper-a--350-500 .x-2 {
//     float: right;
//   }
// }
//
// @media only screen and (min-width: 250) and (max-width: 600) {
//   .wrapper-b--250-600 {
//     /* INNER */
//     /* type B */
//     overflow: hidden;
//   }
//   .wrapper-b--250-600 .x-1 {
//     float: right;
//   }
//   .wrapper-b--250-600 .x-2 {
//     float: left;
//   }
// }

/**
 * Markup examples:
 * for use with the classes in the example above
 */
/*
<div class="wrapper-a wrapper-b-250-600">
  <div class="x-1">01</div>
  <div class="x-2">02</div>
</div>
<div class="wrapper-b">
  <div class="x-1">01</div>
  <div class="x-2">02</div>
</div>
*/