5
\$\begingroup\$

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 < 768px.

.responsive(@width: 0, @height: 0, @type: min, @rules) {
.responsive-max() when(@type = max) {
    .responsive-max-full() when(@width > 0) and (@height > 0) {
        @media only screen and (max-width: @width) and (max-height: @height) {
            @rules();
        }
    }
    .responsive-max-width() when(@width > 0) and (@height < 1) {
        @media only screen and (max-width: @width) {
            @rules();
        }
    }
    .responsive-max-height() when(@width < 1) and (@height > 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 > 0) and (@height > 0) {
        @media only screen and (min-width: @width) and (min-height: @height) {
            @rules();
        }
    }
    .responsive-min-width() when(@width > 0) and (@height < 1) {
        @media only screen and (min-width: @width) {
            @rules();
        }
    }
    .responsive-min-height() when(@width < 1) and (@height > 0) {
        @media only screen and (min-height: @height) {
            @rules();
        }
    }
    .responsive-min-full();
    .responsive-min-width();
    .responsive-min-height();
}
.responsive-max();
.responsive-min();
}
\$\endgroup\$
3
\$\begingroup\$

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;
  }
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.