Media call Mixins with Less

I was working off of this page here:
http://www.iambacon.co.uk/blog/life-is-now-easier-create-media-query-mixins-with-rulesets-less-css

I wanted to create a responsive functions that worked well with the default bootstrap col-xs-* and other sizes, so I came up with this:

.responsive(@maxWidth; @rules) {
    @media only screen and (max-width: @maxWidth) {
        @rules();
    }
}

.extraSmallScreen(@rules) {
    .responsive(480px, {
    @rules(); })
}

.smallScreen(@rules) {
    .responsive(768px, {
    @rules(); })
}

.mediumScreen(@rules) {
    .responsive(992px, {
    @rules(); })
}

.largeScreen(@rules) {
    .responsive(1200px, {
    @rules(); })
}

Usage:

@import "variables/myMediaCalls";

.extraSmallScreen({
  .myBox {
    width: 250px;
  }
});

Now I can make media calls even faster.