Less Media mixins for Bootstrap 3

1.media-mixins-bootstrap3.less

////////////////////////////////////////////////////////
// Mixins

.media(@width, @rules) {
  @media (min-width: @width) { @rules(); }
}
.media(@width, @name, @value) {
  .media(@width, { @{name}: @value; });
}
.media-xs(@rules) { .media(@screen-xs-min, @rules); }
.media-xs(@n, @v) { .media(@screen-xs-min, @n, @v); }
.media-sm(@rules) { .media(@screen-sm-min, @rules); }
.media-sm(@n, @v) { .media(@screen-sm-min, @n, @v); }
.media-md(@rules) { .media(@screen-md-min, @rules); }
.media-md(@n, @v) { .media(@screen-md-min, @n, @v); }
.media-lg(@rules) { .media(@screen-lg-min, @rules); }
.media-lg(@n, @v) { .media(@screen-lg-min, @n, @v); }

.media-all(@n, @v1, @v2, @v3, @v4) {
  .media-xs(@n, @v1);
  .media-sm(@n, @v2);
  .media-md(@n, @v3);
  .media-lg(@n, @v4);
}

2.example.less

////////////////////////////////////////////////////////
// How to use the mixins

.media-xs({
  background-color: white;
  width: 100%;
});
.media-md(width, 80%);


.wrapper {
  background-color: white;
  padding: 0;
  .media-all(width, 100%, 80%, 60%, 40%);
}

3.rendered.css

////////////////////////////////////////////////////////
// Rendered CSS

@media (min-width: 300px) {
  background-color: white;
  width: 100%;
}
@media (min-width: 500px) {
  width: 80%;
}



.wrapper {
  background-color: white;
  padding: 0;
}
@media (min-width: 300px) {
  .wrapper {
    width: 100%;
  }
}
@media (min-width: 400px) {
  .wrapper {
    width: 80%;
  }
}
@media (min-width: 500px) {
  .wrapper {
    width: 60%;
  }
}
@media (min-width: 600px) {
  .wrapper {
    width: 40%;
  }
}