HiveBrain v1.2.0
Get Started
← Back to all entries
patternMinor

Responsive mixin in LESS

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
responsivemixinless

Problem

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  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  0) {
        @media only screen and (min-height: @height) {
            @rules();
        }
    }
    .responsive-min-full();
    .responsive-min-width();
    .responsive-min-height();
}
.responsive-max();
.responsive-min();
}

Solution

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;
  }
}

Code Snippets

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

element {
  overflow: visible;

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

Context

StackExchange Code Review Q#148100, answer score: 3

Revisions (0)

No revisions yet.