Responsive mixin in LESS I wrote a responsive mixin for Less when I couldn't find a full featured one. Curious what other developers have done to solve this problem and hoping to improve/reduce my code since I'm very new to Less:

It would be invoked like:

element {
    overflow: visible;

    .responsive(768px, 0, min, {
        overflow: hidden;
    });
}


Args are: width, height, min|max, rules
This would set overflow: hidden for > 768px. You could also set max in the declaration to set overflow: hidden for &lt; 768px.

.responsive(@width: 0, @height: 0, @type: min, @rules) {
.responsive-max() when(@type = max) {
    .responsive-max-full() when(@width &gt; 0) and (@height &gt; 0) {
        @media only screen and (max-width: @width) and (max-height: @height) {
            @rules();
        }
    }
    .responsive-max-width() when(@width &gt; 0) and (@height &lt; 1) {
        @media only screen and (max-width: @width) {
            @rules();
        }
    }
    .responsive-max-height() when(@width &lt; 1) and (@height &gt; 0) {
        @media only screen and (max-height: @height) {
            @rules();
        }
    }
    .responsive-max-full();
    .responsive-max-width();
    .responsive-max-height();
}
.responsive-min() when(@type = min) {
    .responsive-min-full() when(@width &gt; 0) and (@height &gt; 0) {
        @media only screen and (min-width: @width) and (min-height: @height) {
            @rules();
        }
    }
    .responsive-min-width() when(@width &gt; 0) and (@height &lt; 1) {
        @media only screen and (min-width: @width) {
            @rules();
        }
    }
    .responsive-min-height() when(@width &lt; 1) and (@height &gt; 0) {
        @media only screen and (min-height: @height) {
            @rules();
        }
    }
    .responsive-min-full();
    .responsive-min-width();
    .responsive-min-height();
}
.responsive-max();
.responsive-min();
}
I think you're overcomplicating it. Typically, I think Less users just write the media queries inline with a variable. As in:

@tablet-min: ~"only screen and (min-width: 768)";

element {
  overflow: visible;

  @media @tablet-min {
      overflow: hidden;
  }
}